Comments (3)
I'll share my experiences so far.
I'm assuming that snapshotted apps will be running straight off a bare web-server, like nginx. This makes the nonce approach unsuitable. CSP can either be specified as headers or as meta tags. Headers are kinda a PITA - every new build will require changing the web-server config and doing a restart, both of which likely need root privileges. This makes the meta tags approach appealing.
We also need to let the user specify their own CSP directives. I think the solution is to add hashes to user-specified directives during the snapshot process.
Also, since react-snap
generates quite a few script tags, there will be a lot of hashes to add to CSP directives, which gets very verbose. I'd suggest that the snapshot process should only inject one script tag in the page. So, there's only ever one hash on the page.
If it's too troublesome to change CSP directives during build time, it might be worth considering keeping the hash static. This would mean that the injected script tags need to be the same every time, character for character. This has the benefit of not needing to change nginx config with every build, which means that setting CSP via headers is not off the table in this scenario. However, it means that we'd have to move the dynamic parts of the script contents to some other type of in-DOM storage. Things like data-attributes and template tags are possible locations to store dynamic content without CSP complaining.
If I had to pick between meta tags and headers, I'd choose meta tags though. Headers seem to be the recommended approach, but it seems like the meta tag approach would lead to fewer hassles during deployment, since all hashes are contained within the built bundle, and doesn't need modifications of web-server config.
from react-snap.
Also, puppeteer has some issues with CSP, but I'm hoping this will be fixed soon. puppeteer/puppeteer#1229
from react-snap.
It would be awesome if we could take advantage of the performance gains from react-snap while easily implementing a strict CSP. @rakeshpai's suggestions are great!
@stereobooster Do you have any interest in changing react-snap to work with a CSP? I'm sure it's not simple.
from react-snap.
Related Issues (20)
- Is this package working? HOT 4
- Use multiple index.html with different apps HOT 1
- pagerror and incomplet crawled page with firestore HOT 4
- Problem with access to sitemap.xml
- Error in postbuild when using react-snap
- pageerror at /: SyntaxError: Unexpected token '.' HOT 8
- It is not rendering my css file on my 404 page HOT 1
- options.waitFor freezes crawling/rendering
- YouTube Video Embed Causing Error: DOMEXception: A network error occured. HOT 1
- Home page always being returned HOT 7
- Getting Same Page source for every page HOT 3
- Continue on error HOT 1
- Disable Crawling External JS such as Adsense and Analytics
- Support Vite.JS HOT 4
- Who uses it HOT 4
- There is a phenomenon in which the build does not end in the GitHub Actions (Linux Latest) environment. HOT 9
- React 18 not working ! HOT 10
- Not able to deploy on AWS Amplify HOT 3
- react-snap vulnerability
- SyntaxError: Unexpected token '?' HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-snap.