jquery append执行script脚本

jquery append事件会执行内容的script脚本;

eg:

$('#test').append("<script>alert(123);</script>")

 查看Jquery源码:

function domManip( collection, args, callback, ignored ) {

	// Flatten any nested arrays
	args = concat.apply( [], args );

	var first, node, hasScripts,
		scripts, doc, fragment,
		i = 0,
		l = collection.length,
		iNoClone = l - 1,
		value = args[ 0 ],
		isFunction = jQuery.isFunction( value );

	// We can't cloneNode fragments that contain checked, in WebKit
	if ( isFunction ||
			( l > 1 && typeof value === "string" &&
				!support.checkClone && rchecked.test( value ) ) ) {
		return collection.each( function( index ) {
			var self = collection.eq( index );
			if ( isFunction ) {
				args[ 0 ] = value.call( this, index, self.html() );
			}
			domManip( self, args, callback, ignored );
		} );
	}

	if ( l ) {
		fragment = buildFragment( args, collection[ 0 ].ownerDocument, false, collection, ignored );
		first = fragment.firstChild;

		if ( fragment.childNodes.length === 1 ) {
			fragment = first;
		}

		// Require either new content or an interest in ignored elements to invoke the callback
		if ( first || ignored ) {
			scripts = jQuery.map( getAll( fragment, "script" ), disableScript );
			hasScripts = scripts.length;

			// Use the original fragment for the last item
			// instead of the first because it can end up
			// being emptied incorrectly in certain situations (#8070).
			for ( ; i < l; i++ ) {
				node = fragment;

				if ( i !== iNoClone ) {
					node = jQuery.clone( node, true, true );

					// Keep references to cloned scripts for later restoration
					if ( hasScripts ) {

						// Support: Android<4.1, PhantomJS<2
						// push.apply(_, arraylike) throws on ancient WebKit
						jQuery.merge( scripts, getAll( node, "script" ) );
					}
				}

				callback.call( collection[ i ], node, i );
			}

			if ( hasScripts ) {
				doc = scripts[ scripts.length - 1 ].ownerDocument;

				// Reenable scripts
				jQuery.map( scripts, restoreScript );

				// Evaluate executable scripts on first document insertion
				for ( i = 0; i < hasScripts; i++ ) {
					node = scripts[ i ];
					if ( rscriptType.test( node.type || "" ) &&
						!jQuery._data( node, "globalEval" ) &&
						jQuery.contains( doc, node ) ) {

						if ( node.src ) {

							// Optional AJAX dependency, but won't run scripts if not present
							if ( jQuery._evalUrl ) {
								jQuery._evalUrl( node.src );
							}
						} else {
							jQuery.globalEval(
								( node.text || node.textContent || node.innerHTML || "" )
									.replace( rcleanScript, "" )
							);
						}
					}
				}
			}

			// Fix #11809: Avoid leaking memory
			fragment = first = null;
		}
	}

	return collection;
}

 hasScripts帮你执行脚本。

如果不想执行(防xss注入之类):

1、转义<script>标签

2、过滤掉<script>

3、<script type='text'>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个用 jQuery 实现上传图片的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Upload Image</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <h1>Upload Image</h1> <form> <label for="file">Select image to upload:</label> <input type="file" name="file" id="file"><br><br> <input type="button" value="Upload" id="upload"> </form> <div id="message"></div> <script> $(document).ready(function() { $('#upload').on('click', function() { var file_data = $('#file').prop('files')[0]; var form_data = new FormData(); form_data.append('file', file_data); $.ajax({ url: 'upload.php', type: 'POST', data: form_data, contentType: false, processData: false, success: function(response) { $('#message').html(response); }, error: function(xhr, status, error) { $('#message').html('Error: ' + error); } }); }); }); </script> </body> </html> ``` 在上面的示例中,我们使用了一个 HTML 表单来上传图片,其中包含一个文件选择器和一个上传按钮。当用户点击 "Upload" 按钮时,我们使用 jQuery 的 ajax() 方法来异步提交表单数据。 在 ajax() 方法中,我们首先获取用户选择的文件,然后创建一个 FormData 对象并将文件添加到其中。接下来,我们设置了一些选项:url 表示上传文件的目标地址,type 表示请求的类型,data 表示要上传的数据,contentType 表示请求内容的类型,processData 表示是否对数据进行处理。 在请求成功时,我们将服务器返回的响应显示在名为 "message" 的 div 元素中。如果出现错误,我们也会将错误信息显示在同一个 div 元素中。 注意:在实际应用中,您应该根据自己的需要修改上传文件的目标地址、请求类型、数据、请求内容类型等参数。此外,还应该对上传的文件进行一些安全性检查,例如检查文件类型、大小、是否包含恶意代码等。此处的示例代码使用了一个名为 "upload.php" 的服务器端脚本来处理上传请求,您需要根据自己的应用环境来实现相应的服务器端脚本

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值