Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Content Security Policy] Make the framework CSP-compliant

See original GitHub issue

Feature Request

Description

Basically it seems, to make the framework CSP compliant, all the places using inline styles by $().attr('style','something') should be replaced by $().css()

Original SUI Issue

https://github.com/Semantic-Org/Semantic-UI/issues/5630

Original SUI PR

https://github.com/Semantic-Org/Semantic-UI/pull/5660

The original PR only covered transition, but .attr('style') is also used in accordion, shape, dropdown, modal

Issue Analytics

State:
Created 5 years ago
Comments:15 (7 by maintainers)

Top GitHub Comments

2reactions

fernandops26commented, Aug 31, 2020

Hi guys, it’s been a long time since I left the PR for review, however my approach does not aim to prevent the style from being added in a linear way, my PR focuses on avoiding using the .attr() function because it allows adding any attribute that is NOT IT’S STYLES, that’s why CSP is complaining.

1reaction

lubber-decommented, Aug 17, 2020

🤔 Well, to be honest: After looking at the original SUI issue again, i really don’t understand why the change from attr('style','...') to .css({}) makes any difference in CSP. Could somebody explain? I really doubt the original PR really makes that code csp compliant.

Both variants result in the exact same node change, both add the inline style attribute. See https://jsfiddle.net/lubber/v3ey2w9x/3/

Both methods will add style='border:1px solid black' to the nodes

For my (now) understanding to be CSP compliant, absolutely no inline styles should be used, which will be difficult, especially for the transition module, which uses that technology to dynamically override the display-style (which is not necessarily block all the time

Top Results From Across the Web

Content Security Policy (CSP) - HTTP - MDN Web Docs

Chrome Edge Content‑Security‑Policy Full support. Chrome25. more. Toggle history Full sup... base‑uri Full support. Chrome40. Toggle history Full sup... block‑all‑mixed‑content. Deprecated Full support. ChromeYes. Toggle history...

What is Content Security Policy (CSP) | Header Examples

A Content Protection Policy (CSP) adds protection measures against XSS, clickjacking, and other code injection attacks. Learn how.

Using Content Security Policy (CSP) to Secure Web Applications

This article shows how to use CSP headers to protect websites against XSS attacks and other attempts to bypass same-origin policy. Why Do...

Content Security Policy (CSP) - JSNLog

unsafe-eval - jsnlog.js does not use eval, or versions of setTimeout and setInterval that take strings. So there is no need to use...

Content Security Policy - Documentation - SAPUI5 SDK

Policies Without script-src 'unsafe-inline'. To build CSP-compliant SAPUI5 without inline scripts, avoid the following: <script> elements with inlined ...