Downgrade About Dark Mode
https://observatory.mozilla.org/
Observatory (grade checker by Mozilla) will downgrade score if website still use inline style or script.
https://infosec.mozilla.org/guidelines/web_security#content-security-policy
I use dark mode for https://angora.me that needs "onclick" to trigger and switch the light / dark mode. If I follow observatory standard such "default-src", the toggle doesn't work. And if I use "inline safe", the toggle is work but the score is downgraded.
How to fix this issue?
Vybrané riešenie
Hi Bayu Angora, there might be a workaround for this:
I use dark mode for https://angora.me that needs "onclick" to trigger and switch the light / dark mode.
Could you test whether changing from inline event handlers to addEventListener() resolves it? Here are the changes:
Remove the onclick attributes from your div code:
<div id="mode"><div id="darkBtn">☀</div><div id="lightBtn" class="is-hidden">☀</div></div>
In your script block, add these new lines at the very end after the closing } of the setDarkMode() function:
document.getElementById('darkBtn').addEventListener('click', function(){setDarkMode(true);});
document.getElementById('lightBtn').addEventListener('click', function(){setDarkMode(false);});
Ref. https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener
Does that both work and improve the grade?
Čítať túto odpoveď v kontexte 👍 1Všetky odpovede (4)
Vybrané riešenie
Hi Bayu Angora, there might be a workaround for this:
I use dark mode for https://angora.me that needs "onclick" to trigger and switch the light / dark mode.
Could you test whether changing from inline event handlers to addEventListener() resolves it? Here are the changes:
Remove the onclick attributes from your div code:
<div id="mode"><div id="darkBtn">☀</div><div id="lightBtn" class="is-hidden">☀</div></div>
In your script block, add these new lines at the very end after the closing } of the setDarkMode() function:
document.getElementById('darkBtn').addEventListener('click', function(){setDarkMode(true);});
document.getElementById('lightBtn').addEventListener('click', function(){setDarkMode(false);});
Ref. https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener
Does that both work and improve the grade?
jscher2000 said
Hi Bayu Angora, there might be a workaround for this:I use dark mode for https://angora.me that needs "onclick" to trigger and switch the light / dark mode.Could you test whether changing from inline event handlers to addEventListener() resolves it? Here are the changes:
Remove the onclick attributes from your div code:
<div id="mode"><div id="darkBtn">☀</div><div id="lightBtn" class="is-hidden">☀</div></div>In your script block, add these new lines at the very end after the closing } of the setDarkMode() function:
document.getElementById('darkBtn').addEventListener('click', function(){setDarkMode(true);}); document.getElementById('lightBtn').addEventListener('click', function(){setDarkMode(false);});Ref. https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener
Does that both work and improve the grade?
Thanks, Jscher. I moved the script and it works. By the way, which one is better between default-src: https: or default-src 'self' to get the highest score?
Upravil(a) Bayu Angora dňa
Bayu Angora said
By the way, which one is better between default-src: https: or default-src 'self' to get the highest score?
No idea!
I understand 'self' means same origin, but what does 'https:' do? If 'https:' would allow content from any https:// address, I don't think that's what you want.
jscher2000 said
Bayu Angora saidBy the way, which one is better between default-src: https: or default-src 'self' to get the highest score?No idea!
I understand 'self' means same origin, but what does 'https:' do? If 'https:' would allow content from any https:// address, I don't think that's what you want.
Thanks for answer. It helps me a lot.