X
Tap here to go to the mobile version of the site.

Support Forum

Downgrade About Dark Mode

Posted

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?

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?

Chosen solution

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?

Read this answer in context 1
Quote

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Linux; Android 7.0; Redmi Note 4 Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/77.0.3865.92 Mobile Safari/537.36

More Information

jscher2000
  • Top 10 Contributor
8693 solutions 71056 answers

Chosen Solution

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?

Hi Bayu Angora, there might be a workaround for this: <blockquote> I use dark mode for https://angora.me that needs "onclick" to trigger and switch the light / dark mode. </blockquote> 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:'' <code>&lt;div id="mode">&lt;div id="darkBtn">☀&lt;/div>&lt;div id="lightBtn" class="is-hidden">☀&lt;/div>&lt;/div></code> ''In your script block, add these new lines at the very end after the closing } of the setDarkMode() function:'' <code>document.getElementById('darkBtn').addEventListener('click', function(){setDarkMode(true);}); document.getElementById('lightBtn').addEventListener('click', function(){setDarkMode(false);});</code> Ref. https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener Does that both work and improve the grade?
Was this helpful to you? 1
Quote

Question owner

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?

''jscher2000 [[#answer-1254148|said]]'' <blockquote> Hi Bayu Angora, there might be a workaround for this: <blockquote> I use dark mode for https://angora.me that needs "onclick" to trigger and switch the light / dark mode. </blockquote> 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:'' <code>&lt;div id="mode">&lt;div id="darkBtn">☀&lt;/div>&lt;div id="lightBtn" class="is-hidden">☀&lt;/div>&lt;/div></code> ''In your script block, add these new lines at the very end after the closing } of the setDarkMode() function:'' <code>document.getElementById('darkBtn').addEventListener('click', function(){setDarkMode(true);}); document.getElementById('lightBtn').addEventListener('click', function(){setDarkMode(false);});</code> Ref. https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener Does that both work and improve the grade? </blockquote> 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?

Modified by Bayu Angora

Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8693 solutions 71056 answers

Helpful Reply

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.

''Bayu Angora [[#answer-1254224|said]]'' <blockquote> By the way, which one is better between '''default-src: https:''' or '''default-src 'self'''' to get the highest score? </blockquote> 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.
Was this helpful to you? 1
Quote

Question owner

jscher2000 said

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.

Thanks for answer. It helps me a lot.

''jscher2000 [[#answer-1254365|said]]'' <blockquote> ''Bayu Angora [[#answer-1254224|said]]'' <blockquote> By the way, which one is better between '''default-src: https:''' or '''default-src 'self'''' to get the highest score? </blockquote> 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. </blockquote> Thanks for answer. It helps me a lot.
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.