I'm building out a new Bible website and have successfully integrated RefTagger. I've then set about enabling a range of security headers, one of which is the Content Security Policy.
At the moment this is set up as:
script-src 'self' https://cdnjs.cloudflare.com https://reftaggercdn.global.ssl.fastly.net https://auth.faithlife.com https://biblia.com;
In this configuration, 'self' means that scripts served from the same scheme and domain are safe and will be executed. In addition, I've got some Bootstrap and JQuery scripts on Cloudflare that are safe. However, when I come to add the refTagger CDN I'm getting the main script plus then login redirects through FaithLife before actually loading the content from Biblia. This seems very chatty, I'm not really sure that the auth redirect is intended so that's the first thing to flag.
Second thing to flag is the style-src, which I've currently got set as:
style-src: 'self' <a href="https://cdnjs.cloudflare.com">https://cdnjs.cloudflare.com</a>
This is intended to ensure styles only load from the same website or CloudFlare (Bootstrap again). As RefTagger is setting styles via script, it won't load the styles at all.
CSP is a great security feature because it ensures that if a site is compromised through XSS then it still can't be used to exfiltrate sensitive information like cookies. An attacker can't stealth-post privileged information in the browser off to another website, either directly in script or by loading CSS assets with additional GET parameters for example.
The fix is for me to use the 'unsafe-inline' directive which basically tells the browser "never mind, people can put whatever they want inline". In other words, turn this incredibly powerful security feature off.
I doubt there are currently a lot of people experiencing this issue, but I would like to request consideration of a vNext iteration of the RefTagger library that has better CSP support, specifically:
- Uses a single CDN domain for the refTagger script. Tagger only seems to load a first verse anyway most of the time - why not just dump every verse out in JSON onto the CDN and skip loading from Biblia at all? Might take weight off your web front ends too.
- Ideally doesn't redirect through FaithLife authentication in the background, making it faster to load.
- Pulls the styles into a separate CSS file on the same CDN, and use CSS classes in RefTagger markup.
This would be a little more flexible in terms of styling and make it compatible with CSP. Then you could recommend the right security headers, e.g:
style-src: 'self' https://cdn.faithlife.com
Again, I imagine I'm one of the first people hitting this problem but as the standards are more widely adopted it'd be great to have a version of RefTagger designed to play nicely in a wider security ecosystem.
If you also Open Source the JS side then you might even get some community contributions that add this for you!
