GVKun编程网logo

javascript – jQuery没有链接HTML文件（jquery没有反应）

15

在本文中，我们将带你了解javascript–jQuery没有链接HTML文件在这篇文章中，我们将为您详细介绍javascript–jQuery没有链接HTML文件的方方面面，并解答jquery没有反

在本文中，我们将带你了解javascript – jQuery没有链接HTML文件在这篇文章中，我们将为您详细介绍javascript – jQuery没有链接HTML文件的方方面面，并解答jquery没有反应常见的疑惑，同时我们还将给您一些技巧，以帮助您实现更有效的html()vs innerHTML jquery / javascript&XSS攻击、HTML.innerHTML vs Jquery.html() – Javascript执行、javascript && jQuery 实现html转义、javascript – Jquery .html()无效 – 选择html。

本文目录一览：

javascript – jQuery没有链接HTML文件（jquery没有反应）

javascript – jQuery没有链接HTML文件（jquery没有反应）

我正在学习编程并且面对一些应该非常简单但却让我感到沮丧三天的事情.

我似乎无法将jQuery文件与我的html链接.

这是我的HTML：

<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

    <script src="/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="/script.js"></script>
</head>     
    <body>
    <div>
        <div id="about">
            <p>About.</p>
        </div>
        <div id="work">
            <p>Work.</p>
        </div>
        <div id="contact">
            <p>Contact.</p>
        </div>
    </div>
    </body>

这是jQuery：

$(document).ready(function() {
    $('div').click(function() {
        $(this).fadeOut('fast');
    });
});

它不是最终的jQuery,但我确信这是假设工作.

非常感谢你提前！

解决方法:

<script src="/jquery-2.0.3.min.js"></script>
<script src="/script.js"></script>

文件的路径是错误的.您不使用任何子文件夹.它应该是：

<script src="jquery-2.0.3.min.js"></script>
<script src="script.js"></script>

这解决了我的问题:)
快乐的编码

html()vs innerHTML jquery / javascript&XSS攻击

html()vs innerHTML jquery / javascript&XSS攻击

我在自己的代码上测试xss攻击.下面的示例是一个简单的框,用户可以在其中键入他想要的任何内容.按下“测试！”后按钮,JS会将输入字符串显示为两个div.这是我更好地解释我的问题的一个例子：

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    function testIt(){
        var input = document.getElementById('input-test').value;
        var testHtml = document.getElementById('test-html');
        var testInnerHTML = document.getElementById('test-innerHTML');
        $(testHtml).html(input);
        testInnerHTML.innerHTML = input;
    }
</script>
<head>this is a test</head>
<body>  
    <input id="input-test" type="text" name="foo" />
    <input type="button" onClick="testIt();" value="test!"/>
    <div id="test-html">
    </div>
    <div id="test-innerHTML">
    </div>
</body>

如果您尝试将其复制到.html文件并运行它,它将正常工作,但如果您尝试输入< script> alert(‘xss’)< / script>,则只会抛出一个警告框： `test-html’div内的一个(带有html()函数).

我真的不明白为什么会发生这种情况,而且,用firebug检查代码会给我这个结果(在注入脚本之后)

<body>
this is a test
<input id="input-test" type="text" name="foo">
<input type="button" value="test!" onclick="testIt();">
<div id="test-html"> </div>
<div id="test-innerHTML">
  <script>
    alert('xss')
  </script>
</div>
</body>

正如你所看到的,test-html div是空的,而test-innerhtml div则是脚本.有人可以告诉我为什么吗？是因为html()对脚本注入或类似的东西更安全吗？

在此先感谢,最好的问候.

解决方法:

JQuery删除了脚本标记,这就是为什么你没有看到它附加到dom,更不用说执行了.

要查看为什么jquery剥离它的解释,你可以在这里看到John Resig的回复：https://forum.jquery.com/topic/jquery-dommanip-script-tag-will-be-removed

希望这可以帮助

HTML.innerHTML vs Jquery.html() – Javascript执行

HTML.innerHTML vs Jquery.html() – Javascript执行

参考：html() vs innerHTML jquery/javascript & XSS attacks

从这一点,我可以推断,Jquery提取< script>标签并在DOM中单独执行,它不会出现在DOM中.

请考虑以下HTML代码：

a =< iframe>< iframe //>< script> alert(1)< / script>

b =< iframe>< iframe> //&LT脚本&GT警报(1) – ; /脚本&GT

截至a中的代码,body.innerHTML = a;不执行脚本,但$(“body”).html(a);确实.

为什么？ Jquery的.html()在//之后执行内容但是.innerHTML =不执行？

如果是这样,为什么b.内部.innerHTML =或.html()不会被执行？

更新：对于演示,打开控制台,然后执行：

> document.body.innerHTML =“< iframe>< iframe //>< script> alert(1)< / script>”
> $(“body”).html(“< iframe>< iframe //>< script> alert(1)< / script>”);

1将不执行alert(),但2将执行.用b替换HTML值.两者都不会被执行.

更新2：从我可以确定HTML代码将在Jquery的body()中执行但不在.innerHTML =？

解决方法:

如果在jQuery源代码中更深入一点,我们可以找到html方法.

在这种方法中存在于line

this.empty().append( value );

如果现在转到append,我们可以找到下一个

append: function() {
    return domManip( this, arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.appendChild( elem );
        }
    } );
}

所以,现在找到domManip.这个函数来自html-string构建的fragmen,如果片段有脚本标签执行next code

DOMEval( node.textContent.replace( rcleanScript, "" ), doc );

在哪里DOMEval

function DOMEval( code, doc ) {
    doc = doc || document;

    var script = doc.createElement( "script" );

    script.text = code;
    doc.head.appendChild( script ).parentNode.removeChild( script );
}

所以,至少,我们找到执行脚本的地方.

那么,为什么在某些情况下html运行脚本,否则不行？

这取决于输入字符串和返回buildFragment function.

在buildFragment中我们可以找到next line

tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];

其中elem是输入字符串,jQuery.htmlPrefilter是下一个函数

htmlPrefilter: function( html ) {
    return html.replace( rxhtmlTag, "<$1></$2>" );
}

所以,输入字符串刚刚替换为某些regular exporession rxhtmlTag.

rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|Meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,

所以,试试这个来检查字符串：

console.log(jQuery.htmlPrefilter("<iframe><iframe //><script>alert(1)</" + "script>"));
console.log(jQuery.htmlPrefilter("<iframe><iframe> // <script>alert(1)</" + "script>"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

因此,在第一种情况下,结果是

<iframe><iframe /></iframe><script>alert(1)</script>

在tmp div中将其作为innerHTML插入后,div内部创建了两个元素：iframe和script.所以在此脚本可用于查找和执行之后

在第二种情况：

<iframe><iframe> // <script>alert(1)</script>

字符串未更改,并且在tmp div中将其作为innerHTML插入后,div内部只创建一个带编码内容的iframe元素.这就是为什么在这种情况下脚本不能执行.

javascript && jQuery 实现html转义

javascript && jQuery 实现html转义

背景：

做快站项目遇到的一个bug，一图胜千言，bug如下图：
图片描述

这个问题只在某些帐号下出现，绝大数其他帐号都是正常的，正常情况下是这个样子的：
图片描述

为啥会因帐号而已呢？猜测是因为前端渲染模板所用的数据惹得祸 :（

分析

查看DOM结构：
图片描述

正常情况下，蓝框内的所有li标签应该都在红筐内。

再看渲染模板用的数据：
图片描述

果然，数据里面含有html标签，可我在渲染模板之前没有做转义处理，恩，XSS攻击就是这么来的。

解决方案

  • jQuery 实现html转义

function htmlEncode(value){  
  return $(''<div/>'').text(value).html();  
}  
//Html解码获取Html实体  
function htmlDecode(value){  
  return $(''<div/>'').html(value).text();  
}

借助text()和html()函数来转译html

text() : 方法获取/设置的是匹配元素的文本内容，且会将HTML中的预留字符（如大于号（>））转换成html字符实体，以便于正确显示.
html(): 方法是获取/设置匹配元素的html内容。

  • javascript 实现html转译

//编码
function html_encode(str)  
    {  
        var s = "";  
        if (str.length == 0) return "";  
        s = str.replace(/&/g, ">");  
        s = s.replace(/</g, "<");  
        s = s.replace(/>/g, ">");  
        s = s.replace(/ /g, " ");  
        s = s.replace(/\''/g, "''");  
        s = s.replace(/\"/g, """);  
        s = s.replace(/\n/g, "<br>");  
        return s;  
    }  
  
//解码  
function html_decode(str)  
{  
    var s = "";  
    if (str.length == 0) return "";  
    s = str.replace(/>/g, "&");  
    s = s.replace(/</g, "<");  
    s = s.replace(/>/g, ">");  
    s = s.replace(/ /g, " ");  
    s = s.replace(/''/g, "\''");  
    s = s.replace(/"/g, "\"");  
    s = s.replace(/<br>/g, "\n");  
    return s;  
}

javascript – Jquery .html()无效 – 选择html

javascript – Jquery .html()无效 – 选择html

我有这样的代码：

$cena = $(element) > $('.main_paket_cena').attr('name');
alert($cena);

所以我在元素中选择了一个具有类main_paket_cena的元素

我的html就是这样的：

<divonclick='toggleMenuSelection(this)'>
    <p>$kolicina $jm</p>
    <pname='testing'>$cena din</p>
</div>

因此,而不是测试它返回我的真实.

我已经尝试使用.html()来查看它将显示什么,并再次显示为true但是如果我使用这样的代码：

$(element) > $('.main_paket_cena').html("Some HTML");

它使用类main_paket_cena更改所有元素的html

解决方法:

So I am selecting element inside element which has class main_paket_cena

不是这种情况.你使用>运算符正在执行jQuery对象的“大于”比较.这就是结果是布尔值的原因 – 在您的情况下为true.

如果要在另一个元素中选择一个元素,请使用find()：

var cena = $(element).find('.main_paket_cena').attr('name');
console.log(cena);

关于javascript – jQuery没有链接HTML文件和jquery没有反应的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于html()vs innerHTML jquery / javascript&XSS攻击、HTML.innerHTML vs Jquery.html() – Javascript执行、javascript && jQuery 实现html转义、javascript – Jquery .html()无效 – 选择html等相关知识的信息别忘了在本站进行查找喔。

本文标签：

上一篇php – 使用$.ajax从json_encode接收响应时获取parseerror（php接收ajax传的数据）

下一篇javascript – 来自追加的jquery .on()（javascript来源）

相关文章