Removes inline scripts and inline styles to make it compatible with the newly added security headers #4369
Conversation
…and scripts to make them compatible with the new security headers
There was a problem hiding this comment.
Hey @ubaskota, thanks for opening this PR!
This is a great start! I've left some comments mainly related to improving maintainability.
The main concern I have is with the docs/source/_templates/head_css_variables.html file. I don't understand how it works and a bit skeptical of the change.
There was a problem hiding this comment.
This file seems to be a port of the partials/icons.html file in furo. Is there a reason why this is being added to layout.html? Furo also has a layout.html file with different contents.
| </script> | ||
| {% include "partials/icons.html" %} | ||
| <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> | ||
| {% include 'layout.html' %} |
There was a problem hiding this comment.
Based on the discussion in the related comment above, we'll need to update this to {% include "partials/icons.html" %}
| {% include "partials/icons.html" %} | ||
| <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> | ||
| {% include 'layout.html' %} | ||
| <svg xmlns="http://www.w3.org/2000/svg" class="hidden-svg"> |
There was a problem hiding this comment.
We should choose a more generic name than hidden-svg, maybe instead use hidden. If we ever decide to apply this to another element that isn't an SVG, this class wouldn't make sense.
| @@ -103,3 +103,7 @@ h3.admonition-title::before { | |||
| mask-image: var(--icon-admonition-default); | |||
| mask-repeat: no-repeat; | |||
| } | |||
| /* Apply SVG from inline page.html */ | |||
| .hidden-svg { | |||
There was a problem hiding this comment.
See comment below about renaming this to something more generic.
| if (typeof AWSCShortbread !== 'undefined') { | ||
| const shortbread = AWSCShortbread({ | ||
| domain: ".amazonaws.com" | ||
| // domain: ".cloudfront.net" |
There was a problem hiding this comment.
nit - remove this comment
|
|
||
| document.body.dataset.theme = localStorage.getItem("theme") || "auto"; | ||
|
|
||
| if (typeof AWSCShortbread !== 'undefined') { |
There was a problem hiding this comment.
In what cases would this condition fail?
| @@ -0,0 +1,61 @@ | |||
| {# Adapted from Just the Docs #} | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="hidden-svg"> | |||
There was a problem hiding this comment.
Change to class="hidden" if you decide to change the class name.
There was a problem hiding this comment.
Can you explain how the changes to this file work, it doesn't make sense to me? Where is the declare_css_variables called?
There was a problem hiding this comment.
Also, we should add this file to a new partials directory to mimic the structure of furo (as previously mentioned, icons.html will also be added to this directory. The name should also be changed to _head_css_variables.html (currently missing an underscore).
There was a problem hiding this comment.
The only reason I see for porting over base.html from furo is to add extra content to the <head> element.
We can prevent having to port over this entire file and instead add the following to page.html.
{%- block extrahead %}
<script src="https://prod.assets.shortbread.aws.dev/shortbread.js"></script>
<link href="https://prod.assets.shortbread.aws.dev/shortbread.css" rel="stylesheet">
<script src="https://a0.awsstatic.com/s_code/js/3.0/awshome_s_code.js"></script>
{% endblock %}
Due to the recently added Content Security Policy(CSP), all inline scripts are automatically blocked. In order to fix this, we had to remove inline scripts and styles, and keep them in separate files. This change performs all necessary edits to remove the inline scripts and keep them in separate files.