I am currently implementing Content Security Policy in my application.
My application uses FontAwesome library for icons and I use data-fa-transform attribute to operate some transformations to the icons like explained in the Power Transforms page of the docs.
When executing the page, FontAwesome adds a style="transform-origin: XXem XXem;" tag to the svg tag.
Is there any way to prevent this behavior ? This causes problem with the Content Security Policy not allowing inline style tags (and no, I do not want to use unsafe-inline which defeats the purpose of CSP alltogether).
Not using data-fa-transform ultimately solves the problem but this is a usefull feature and if I could keep using it without this inconvenience, it would be very helpful.
When searching for info, I found out that adding this style tag is apparently "on purpose" in the code.
I do not understand why through neither how to prevent this.
Related
Is there any harm if custom tags are used and created based on one's choice?
like the one below
<hello>hi there!</hello>
I tried using CSS
hello{
color:red;font-family:arial;
}
The above code works
I have used the above and also can add CSS. is there any harm of doing this, or the CSS features these won't support?
This is purely out of curiosity so don't suggest CSS edits or solutions please.
Why you can't make up elements
It is not valid HTML. Therefore how it behaves will be unpredictable.
It may work in some browsers, currently, but if any of your users visit your site on a different browser, they may get a totally different experience. Further to that, support could be dropped, or change at any time without warning.
Other options for custom elements
It is actually possible to define your own Document Type Definition (DTD), however that too is not a good idea.
Your best bet is to either stick with normal, well-supported HTML elements (see here for list of valid elements), or to use a web component framework, such as Vue, Angular or React, for custom elements/ components.
Don't forget, that you can add the class attribute (as well as others) to any element for styling, so for your use-case, there isn't any need to have additional elements.
I am trying to create a website on Squarespace and am having trouble selecting elements on my HTML page to use in the custom css. When I use the inspect element on my browser, the ID's for some elements change while others are constant.
I am running the developer mode and downloaded the code to my local machine via github.
In the downloaded site.region file I found the div element which contains the content I am trying to style:
<div id="content" class="main-content" data-content-field="main-content" data-collection-id="{collection.id}" {.equal? collection.typeName "gallery"}{.or}{.equal? collection.typeName "index"}{.or}data-edit-main-image="Banner"{.end}{.end}>
{squarespace.main-content}
</div>
Where is {squarespace.main-content} coming from and how do I select elements inside of it to style?
Regarding some IDs changing and some staying constant, indeed, this is the case. See this answer for more information on this. In summary:
...any ID starting with "yui" can/will change on page
refresh...however...block IDs (ID's starting with "block-" do not
change as long as the block is not removed...
Regarding where the {squarespace.main-content} coming from, that is a JSON-T tag that tells the server to load the content as entered within the content management system (a.k.a. "Layout Engine") for that page. Wherever that tag is, the content from Layout Engine for that page will be loaded.
Finally, regarding how to select the elements within the main-content for styling with CSS, you are on the right track. Inspect the elements as you are doing. If you want to target a specific block, look for ID's starting with block- and target those. Or find other ways to target the element, such as :first-child or nth-child selectors. Then enter your CSS in the CSS Editor or, if you're using Developer Mode (as you indicated that you are), then add the rules to your base.less file (or other CSS files as the case may be) and then update your template using Git or SFTP.
One last note that you do not need to use Developer Mode to target elements with CSS. You can simply target the right elements as mentioned then enter the rules in the CSS editor as mentioned, so there may be no need for the added complexity of Developer Mode at all.
In squarespace do this:
Turn ON the developer option ( to edit JS it is mandatory at least, not sure about CSS),
go to DESIGN »» CUSTOM CSS
add/change whatever you like there, you should style classes or css selector like nth-child/nth-of-type instead of those dynamic ID's.
You can see more info here:
Adding custom HTML, CSS, and JavaScript
Using the CSS Editor
I am currently using the owasp java library on a backend service in order to sanitize HTML sent from the client. The owasp java library has a CSS whitelist of css rules that it will allow inside of any style tag inside of html elements. You can find that whitelist here.
One thing that I noticed about this whitelist is that the display property is omitted. This means that if I create HTML code like the following:
<div style="margin-left:0px;display:none;"></div>
then the HTML sanitizer with the default styling whitelist will strip out the display rule and the HTML saved on the server will be:
<div style="margin-left:0px;"></div>
Why is the display property not white-listed by default?
Because then the other white-listed styles wouldn't work due to the element not being displayed at all
UPDATE
display has a lot of weird edge cases that affect layout in weird
ways.
inline, block, and inline-block are likely safe in most contexts.
fixed is probably safe in none.
table and others are probably dodgy since there may be ways to break
visual containment.
Even block and inline block can break visual containment for example
with a policy that only allows inline tags when the embedder fixes the
width of the container and doesn't hide overflow.
Source
I have made a small popup window that shows up at the bottom of the page (like a recommendation system). But whenever I embed my script to any of the client's website, it disturbs my CSS. Like the CSS which is on the client's website overshadows my CSS and this causes me to fix my CSS for each client. Is there a fix that I will have to install on my code?
Please help
Thanks
This is due to overlapping CSS properties of client's and your newly developed. I recommend you to inspect element of google chrome's very nice feature. You can individually identify your overlapping properties. If this is too much complex. Like James commented give a new id to your pop-up menu, which will separate your pop-up CSS from all other components on your web page
On of the ways I heard about is Shadow Dom, and in this article it describe it and at the beginning of the article he listed the problem in brief: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
But there is a fundamental problem that makes widgets built out of
HTML and JavaScript hard to use: The DOM tree inside a widget isn’t
encapsulated from the rest of the page. This lack of encapsulation
means your document stylesheet might accidentally apply to parts
inside the widget; your JavaScript might accidentally modify parts
inside the widget; your IDs might overlap with IDs inside the widget;
and so on.
Else which I did my self long time ago is: to name all your ids, classes with a special names for example 'mywebsite.myclass' this may minimize the issue. and I saw this way is used by many bookmarklets which import html,css and javascript to user opened page.
"All browsers" is a lot of browsers :P
CSS is going to get interesting soon thanks to shadow DOM. You are going to be able to create a web component that is completely isolated, DOM and CSS, from the rest of the document, which is exactly what you want.
Obviously, it's not in place in al browsers (only in Chrome at the time of me writing this). Meanwhile, this is what I would do:
Use shadow DOM components if available
Anyway, manually name-space everything you use (CSS classes, JavaScript, etc)
Try to use custom elements for everything. (that way, there's less risk of your e.g. <h2>s being styled by outer CSSs)
As a last resource, use very specific selectors (look up CSS specificity), and use !important. Just to be clear: never do this routinely!
Most of that stuff will fail for some value of "All browsers". You'll have to compromise somewhere, I guess.
Yes you can reset your div styles.
Something like this:
div.your-popup * {
/* your reset */
}
And try to set !important to styles or put them inline.
In addition create unique class names that no one can override it.
P.S. http://www.cssreset.com/
We have some code that removes "dangerous" attributes and tags from HTML. I noticed that style is among the list of "dangerous" attributes. What could be the risk from that attribute?
In IE you can include #behaviors in there which can load little Javascripts.
With CSS3 you can also interject little bits of text, which could be dangerous depending on your website.
Here's an example of a bug in MediaWiki that creates a vulnerability based on inline style attributes.
It's possible to make things that are invisible or otherwise very deceptive using style sheets. For example, you could put a giant, invisible anchor link over the whole page so that when the user clicks on something, he's taken to an identical page on a server in Russia.