Login/Install Page needs unsafe-inline styles to be allowed by CSP in order to render correctly

[n33l4y]

Description

The login/install page seems to use inline styles and as such does not render as expected when a Content Security Policy that does not allow inline styles is applied. The screenshots below show the login/install page in action without CSP and with a CSP that disallows inline styles

Note that even though the login/install page does not render as expected (when a CSP that disallows inline styles is applied), the Install app button functionality works perfectly fine when invoked.

Login/Install Page (without any CSP) - Renders as expected

Login/Install Page (with a CSP that disallows inline styles) - Does not render as expected

Is there a way I can configure/initialize shopify_app so that the styles it uses are external (instead of inline) or any other workaround that I can use in my app so that I don't have to relax the content security policy (to allow inline styles) just to ensure that the app login/install page renders correctly?

Steps to Reproduce

1. I have created a sample app at ns-sample-app
2. Cloning and running the sample app should reproduce the issue

Expected behavior:

The Login/Install page renders as expected even when a CSP that disallows inline styles is applied. See above screenshots for reference

Actual behavior:

The Login/Install page does not render as expected when a CSP that disallows inline styles is applied. See above screenshots for reference

Reproduces how often:

Every time

Browsers

Tested (and observed) with Firefox but should also happen with other browsers

Gem versions

shopify_app 18.0.2

Additional Information

Security

• I have redacted any private information from my logs or code snippets.

[nelsonwittwer]

#1474 should address the concerns pointed out here, so we are going to close this issue.

If you still encounter this issue with the latest stable version, please reopen using the issue template. You can also contribute directly by submitting a pull request– see the CONTRIBUTING.md(.github/CONTRIBUTING.md) file for guidelines

[nickpith]

@nelsonwittwer I'm not sure #1474 actually fixed this issue. It just adjusts the CSP for the frame-ancestors not style-src.

We just ran into this for another app. The only way to fix it is to set unsafe-inline in the CSP for style-src. However, I believe we can update the login/install page's <style> tags to specify a nonce.

I'm more than happy to put up a PR because using a nonce is the best way to handle this and avoid unsafe-inline.

[nelsonwittwer]

@nickpith - I'd love to see a PR if you are interested in seeing this nonce added. Feel free to tag me once you've got the PR ready to roll! Thanks :)

[github-actions]

This issue is stale because it has been open for 60 days with no activity. It will be closed if no further action occurs in 14 days.

[github-actions]

We are closing this issue because it has been inactive for a few months.
This probably means that it is not reproducible or it has been fixed in a newer version.
If it’s an enhancement and hasn’t been taken on since it was submitted, then it seems other issues have taken priority.

If you still encounter this issue with the latest stable version, please reopen using the issue template. You can also contribute directly by submitting a pull request– see the CONTRIBUTING.md file for guidelines

Thank you!

[nickpith]

Reopening because I'm still hoping to find some time to make a change for this.

[github-actions]

This issue is stale because it has been open for 60 days with no activity. It will be closed if no further action occurs in 14 days.

[github-actions]

We are closing this issue because it has been inactive for a few months.
This probably means that it is not reproducible or it has been fixed in a newer version.
If it’s an enhancement and hasn’t been taken on since it was submitted, then it seems other issues have taken priority.

If you still encounter this issue with the latest stable version, please reopen using the issue template. You can also contribute directly by submitting a pull request– see the CONTRIBUTING.md file for guidelines

Thank you!