external css in body of html file
Question
I have a question that bothers me on some projects I'm currently working on. This question is not a duplicate of What's the difference if I put css file inside <head> or <body>? or similar.
For example imagine an email service. User has some email inbox at goodmail.ex, where he receives an email from Badguy. Badguy knows source codes for goodmail.ex and knows there is some input on the page next to where the letters open, where the user should insert some sensitive information. Or may even be a popup, so Badguy writes the letter in HTML format and adds some position:fixed or position:absolute styles, so one of the blocks (for this example let it be email information - login and password popup, saying user session has ended, to renew, enter your data) with design like the goodmail.ex service has. The user thinks it's okay and not related so he inputs it and this information gets send somewhere else.
So! The question is not how I can block this css, some filtering with a custom parser should work well here, but how can I block user to use any of the CSS classes that goodmail.ex is using? For example goodmail.ex is filtering every letter for position:fixed, but has some block floating with a class named "goodmailfloatingbox", so the Badguy simply writes and the fakelogin gets the position:fixed attribute. This is something not really well explained, but I hope you will understand what is required.
Oh yes, iframe is not an option.
So is it possible to override existing defined class styles with some code in the middle of the page to make it safe AND make it as much crossbrowser compatible as it can?
Thank you
1 answers
solution1
1 ACCPTED 2011-11-29 13:33:36
You could write a short script that uses document.getElementsByTagName for either style and link and the resultant array of values can then be checked to see if all the loadede css files are proper.
To override existing definitions, just use !important in the css file, and that will be the most dominant style (for that type).
If you want to load it in the middle of the page, you can use a javascript function that does the same as the first paragraph here, except it deletes the object that appears in the body, and appends it to the head object. I do that if I use ajax to update a page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.