X
Thinta lapha ukuze uye kuveshini yamakhalekhukhwini kusayithi.

Isithangami Sabeseki

Downgrade About Dark Mode

Kuphostiwe

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?

Isisombululo esikhethiwe

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?

Funda le mpendulo ngokuhambisana nalesi sihloko 1
Isicaphuno

Eminye Imininingwane Yohlelo

Isisebenziso

  • I-ejenti Engumsebenzisi: 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

Eminye Imininingwane

jscher2000
  • Top 10 Contributor
8695 izisombululo 71074 izimpendulo
Kuphostiwe

Isisombululo Esikhethiwe

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?
Ingabe lokhu kube usizo kuwena? 1
Isicaphuno

Umnikazi wombuzo

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?

Okulungisiwe ngu Bayu Angora

Ingabe lokhu kube usizo kuwena?
Isicaphuno
jscher2000
  • Top 10 Contributor
8695 izisombululo 71074 izimpendulo
Kuphostiwe

Impendulo Ewusizo

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.
Ingabe lokhu kube usizo kuwena? 1
Isicaphuno

Umnikazi wombuzo

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.
Ingabe lokhu kube usizo kuwena?
Isicaphuno
Buza umbuzo

Kufanele ulogele ukungena ku-akhawunti yakho ukuze uphendule amaphosti. Uyacelwauqale umbuzo omusha, uma ungekabi nayo i-akhawunti namanje.