Develop Reference

Which has more specificity between hidden attribute in HTML or display property in CSS? And how?

Also what is the best way to hide the elements from the DOM so that the attacker won't be able to change the css property or html attribute in order to access the element. I know we can use React or Angular to develop website and it is easier to hide or display elements. But I want to know in pure HTML & JS what is the best way?

Anyone can just use the browser console and find all elements with for example:
document.querySelectorAll('*');
It does not matter if elements are hidden with CSS.
Even if you encrypt your HTML you will have to decrypt it to show it to the browser. Then the above code still finds all the elements.
Any code you have can be deactivated by setting a breakpoint and rewriting it in-browser using the developer tools.
Even if you replace document.querySelectorAll and all like them with an empty function, developers can still just add jQuery or any DOM querying engine and find your elements that way.
Any code you can use to hide or show elements can just be executed using the browser console if someone spends the time understanding your code.
How else would you debug or test it?
Angular, Vue etc. does remove elements from the DOM but you should never expect this to be a security feature! A hacker can easily set a breakpoint anywhere in your code, inspect API results from the Network panel, go into the components' code to find out what HTML they would be rendering and much more I haven't started to mention.
To implement security you want to only have in the browser what the user needs to see.
There is no way around it.
DOM, stylings, scripts, assets, etc. can always be accessed using developer tools.
As for the question in your question title:
style attribute styles have a higher specificity than CSS from file (or style tags)
CSS from file (or style tags) with !important has higher specificity than styles from the style attribute
style attribute styles with !important have the highest specificty
So !important just overrides specificity if you want to look at it that way. Other than that you should read about CSS Specificity.

Both are same. If you store your value from html hidden or css hide. Anyone can find out them.
So if you are using html , js & css and want to pass value as hidden than disable developer tool and shortkey to open it by this way you can protect your data or else use any encryption method for that.

CKEditor - Editable content CSS interferes with editor toolbar styling

I'm using CKEditor to allow users to edit HTML documents. I need to allow the users to be able to place any kind of CSS or HTML into their documents. When the user's document CSS has !important rules they change the styling of the CKEditor toolbar.
This can be seen here: https://jsfiddle.net/hqpfjzyr/1/
Click on the "Link Preview" and you'll see the buttons of the toolbar are also red.
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
The only thing that I can think of is to add more CSS targeting the toolbar and explicitly setting every attribute to the correct value with !important rules but that seems like a daunting task.
What am I missing here?

This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
What is described on CKEditor docs doesn't include case with !important flag, because it can't work like you want to. This flag overwrites other css rules including ones in reset file. If you still want to use !important inside editor you might consider to use classic editor instead of inline. Change CKEDITOR.inline( to CKEDITOR.replace. How does that help? Classic editor is rendered inside iframe, which has separate styles that can't affect anything outside it.

Use CSS for certain block (scoped CSS)

I have application where user can paste their html code, when ever I paste html with style tag those CSS rules are applied to my application too.
Those CSS rules should be applied only to pasted code.
Found this:
http://www.w3schools.com/tags/att_style_scoped.asp
But it only works with firefox, would be perfect solution for this problem.
Now I'm thinking about parsing pasted CSS rules and applying them to html as inline css rules.
Is there any better solution?

Use iFrame to provide safe way of showing user supplied HTML code. That way even when user tries to overwrite your site to look like bank account he still have no access to outer-iFrame content.

CKEditor - How to use the Advanced Content Filter and widgets together in 2 editors

I've got 2 CKEditor instances. One editor (A) supporting a number of widgets, another editor B has an Advanced Content Filter with these settings to make sure only <p>, <br>, <em> and <strong> tags are allowed in the second editor:
config.allowedContent = 'p br em strong';
My widget contains an image and some other tags and this filter setting:
config.allowedContent = 'img div figure figcaption';
When text containing this kind of widget from editor A is pasted into editor B, I would like the editor to strip out the widget but it doesn't. This makes sense because the allowedContent setting of the widget makes sure that the image is not removed.
However, my second editor does not know anything about this widget and I would like to configure the filter to strip out all widgets pasted in.
I've tried adding the Disallowed Content setting to editor B:
config.disallowedContent = 'img div span figure figcaption';
But without succes, I keep getting the widget div's in editor B.
Same goes for pasting the widget into editor 4 of the sample editors provided by CKEditor. The widget is inserted even if the ACF does not allow it.
Is there another filter option to prevent widgets from sneaking into the body?

Unfortunately there's no easy way to filter pasted events with the ACF at the moment - see http://dev.ckeditor.com/ticket/11115. It has the 4.5.0 milestone assigned, but I don't feel that we'll manage to make this change in this version. There are architectural limitations which make this ticket very complex.
What you could try to do is to intercept pasted content on the editor#paste, parse the content and filter pasted widgets manually. The hard thing (the actual #11115 blocker) is that in the pasted content you'll find upcasted versions of widgets, with all wrappers, all internal attributes etc. ACF cannot be applied to this content directly because ACF is supposed to filter downcasted versions of widgets. Therefore you need to filter this more manually or with a special CKEDITOR.filter instance.
You can find this question useful - Apply CKEditor Advanced Content Filter to a string.

Javascript style editor toolbar for any html element

I am looking for a JavaScript widget to edit font-related and border-related CSS properties of any given html element.
I imagine it would produce a toolbar like rich text editors have, except that I can could choose the element to apply the style to at the widget initialization time.
I have been looking through search engines with no success. jQuery based libraries are preferred.

Actually I dont understand completely. But;
If you want to make Javascript-Run console, check this page(look at bottom) :
http://eloquentjavascript.net/chapter8.html