Comments (3)
Talking with @willemarcel it seems you faced some challenges implementing this, so I wanted to share some tips from my personal experience implementing the recommendations on other sites:
-
Try to implement all recommendations EXCEPT CSP. This will boost the security of the site to B, which is very important to avoid non-secure connections to the site or its resources or XSS and click-jacking attacks.
-
During a second phase, play with the different CSP options, starting with the more permissive one and moving to the most restrictive one in different phases:
https://infosec.mozilla.org/guidelines/web_security#content-security-policy
For this there are at least 3 important factors: Have a list of external urls where you load resources from (or try to self-host most libraries to improve privacy) and analyze how much inline js and css you use on your code (to try to plan to move these to a file instead).
Please, ping me if you have other questions where my experience can be helpful.
Cheers.
/cc @eternaltyro @dakotabenjamin
from tech.
@nukeador Thank you for the guidelines. There are multiple challenges in play here.
Try to implement all recommendations EXCEPT CSP. This will boost the security of the site to B, which is very important to avoid non-secure connections to the site or its resources or XSS and click-jacking attacks.
The HOT website is hosted on Github pages which, sadly, does not allow setting HTTP headers. So we are restricted to http <meta>
tags for setting these security flags. Meta tags as you may know are not supported by all browsers and is not considered standard.
During a second phase, play with the different CSP options, starting with the more permissive one and moving to the most restrictive one in different phases:
Missing any domains in the CSP whitelist causes drastic problems with functionality. Therefore, I had to know every single resource included in the HOT website. I used a browser tool that generates CSP policies and loaded (what I thought was) all the pages so that the tool can capture a list of resources being loaded. I overestimated the coverage here and the implementation broke the website and several blogposts.
I'm trying to now find tools (or build a simple one myself) that read the sitemap and visit all the pages in the sitemap to build a list of resources.
Alternatively, I could use the content-security-policy-report-only
header and use a tool that parses reports to the report-uri
. Unfortunately, report-only
tag can't be passed through <meta>
tags.
In the end, it seems like using the sitemap.xml to crawl all pages and gather resources seems like the most reliable way to go. I'll keep this ticket updated as I make progress.
from tech.
The HOT website is hosted on Github pages which, sadly, does not allow setting HTTP headers. So we are restricted to http
<meta>
tags for setting these security flags. Meta tags as you may know are not supported by all browsers and is not considered standard.
Do you have specific browsers in mind? According to this table all major browsers have full compatibility with the main CSP attributes that the observatory recommends to change:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#browser_compatibility
My experience implementing CSP thought meta tags on github pages recently didn't resulted into compatibility issues.
Missing any domains in the CSP whitelist causes drastic problems with functionality. Therefore, I had to know every single resource included in the HOT website. I used a browser tool that generates CSP policies and loaded (what I thought was) all the pages so that the tool can capture a list of resources being loaded. I overestimated the coverage here and the implementation broke the website and several blogposts.
In the end, it seems like using the sitemap.xml to crawl all pages and gather resources seems like the most reliable way to go. I'll keep this ticket updated as I make progress.
This can be quite complex yes, specially if you want optimize for any existing external resource, that's why doing CSP in a second phase is advised.
I would say that the security recommendations is to have control over external resources loaded, so allowing anyone to add images from any domain might be a policy change to consider. What other sites have done is to fetch and copy locally all these images to avoid the burden of having a huge allow list.
This also applies to external css and js, where most of the times the most productive approach is to copy them locally to have full control on the code that is executed.
from tech.
Related Issues (20)
- Project idea link broken HOT 1
- Links are Broken in the " How the repo is Organised" HOT 1
- GeoChat like system to see where remote mappers are mapping/validating
- Disaster Maps.me
- Creating roadmaps for core tools HOT 2
- Developing a tech strategy HOT 1
- Community conversations to inform tool roadmaps and direction HOT 4
- Create a April update for wider HOT community HOT 5
- Setting final scope for Outreachy and GSOC projects
- Add https support to the redirect HOT hosts for hot.openstreetmap.org HOT 2
- Humanitarian map style/tiles missing HOT 6
- Tech Working Group Updates HOT 2
- HOT enhancement requests for Esri World imagery MORE than welcome HOT 5
- Typos present in README.md
- Missing Maps Leaderboard Related
- Set up experiment around mapping with open machine learning HOT 4
- BWS-152 test issue HOT 10
- [BWS-1047] JIRA Test HOT 2
- [BWS-1126] JIRA integration test HOT 4
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 tech.