X
Nhấn vào đây để đến phiên bản di động của trang web.

Diễn đàn trợ giúp

Downgrade About Dark Mode

Được đăng

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?

Giải pháp được chọn

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?

Đọc câu trả lời này trong ngữ cảnh 1
Trích dẫn

Chi tiết hệ thống bổ sung

Ứng dụng

  • Chuỗi đại diện người dùng: 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

Thông tin chi tiết

jscher2000
  • Top 10 Contributor
8695 giải pháp 71076 câu trả lời
Được đăng

Giải pháp được chọn

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?
Bài viết này có hữu ích với bạn không? 1
Trích dẫn

Người tạo câu hỏi

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?

Được chỉnh sửa bởi Bayu Angora vào

Bài viết này có hữu ích với bạn không?
Trích dẫn
jscher2000
  • Top 10 Contributor
8695 giải pháp 71076 câu trả lời
Được đăng

Câu trả lời hữu ích

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.
Bài viết này có hữu ích với bạn không? 1
Trích dẫn

Người tạo câu hỏi

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.
Bài viết này có hữu ích với bạn không?
Trích dẫn
Đặt một câu hỏi

Bạn phải đăng nhập vào tài khoản của bạn để trả lời bài viết. Vui lòng bắt đầu một câu hỏi mới, nếu bạn chưa có tài khoản.