外部css在html文件的正文中 [英] external css in body of html file
问题描述
我有一个问题，让我困扰我目前正在开展的一些项目。此问题与不同区别如果我把css文件里面< head>或< body> 或类似的。
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.
例如想象一个电子邮件服务。用户在goodmail.ex上有一个电子邮件收件箱，他收到来自Badguy的电子邮件。 Badguy知道goodmail.ex的源代码，并知道在页面上的字母打开的地方有一些输入，用户应该在其中插入一些敏感信息。或者甚至可能是一个弹出窗口，所以Badguy写的HTML格式的信件，并添加一些位置：固定或位置：绝对样式，所以一个块（对于这个例子让它是电子邮件信息 - 登录和密码弹出，说用户会话已结束，续订，输入您的数据）与设计喜欢goodmail.ex服务有。用户认为它是好的，不相关，所以他输入它，这些信息发送到别的地方。
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.
所以！问题是不是我可以阻止这个CSS，一些过滤自定义解析器应该在这里工作，但是如何阻止用户使用goodmail.ex使用任何CSS类？例如，goodmail.ex过滤每个字母的位置：fixed，但有一个块漂浮与类名为goodmailfloatingbox，所以Badguy只写和fakelogin获取位置：fixed属性。这是不太好解释，但我希望你会明白需要什么。
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.
哦，是的，iframe不是一个选项。
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
推荐答案
您可以写一个简短的脚本，使用 document.getElementsByTagName 和 可以检查 style 和结果数组的值
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.
要覆盖现有的定义，只需在css文件中使用！important ，并且将是最主要的样式（对于该类型）。
To override existing definitions, just use !important in the css file, and that will be the most dominant style (for that type).
如果要将其加载到页面中间，可以使用javascript函数这里与第一段相同，除了它删除出现在主体中的对象，并将其附加到头对象。我这样做，如果我使用ajax更新页面。
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.
这篇关于外部css在html文件的正文中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
