浏览器控制台中的Javascript要求 [英] Javascript Require in browser console
问题描述
在浏览器控制台窗口中输入javascript时:
1)
以下代码有效:
alert('hi');
2)
以下内容不存在:
(function() {
var scr = document.createElement('script');
scr.src = 'http://www.myrandomwebsite.com/myjs.js';
document.head.appendChild(scr);
myfunc();
})()
其中 myjs.js 文件夹包含:
var myfunc = function(){alert('hi')};
解释2) 在这种情况下输入的代码段确实会导致以下代码出现在源代码的 header 标记的末尾:
<script src="http://www.myrandomwebsite.com/myjs.js"></script>
但是无法识别功能 myfunc ，因为我收到以下错误消息:
VM132:5未捕获的ReferenceError:未定义myfunc
这使我相信，作为一种安全措施，浏览器不会运行在页面加载后编辑的javascript代码或类似的内容.
问题::这里有某种解决方法吗?在大多数编程语言中，它是否是像require('...');一样起作用的函数. 但不能通过安装任何特殊的扩展程序而已，
我经常走动，并在不同的计算机上工作，并且希望能够使用我拥有的某些代码，而不必总是随身携带USB.
________________________ 更新 ________________________
@Jared Smith提出的解决方案非常有效.现在有一个实例，它不起作用(我理解为什么).当网站的内容安全政策不允许从其他URL加载脚本或不允许加载任何连接时:
例如:
Content-Security-Policy: script-src 'self' https://apis.google.com
Content-Security-Policy: connect-src 'self' https://apis.google.com
这很合理.我的情况是我有自己的代码可以运行，但是我希望能够将此代码存储在另一个站点上，并在旅行或在其他计算机上使用该代码，而无需从USB中提取它们.
现在，出于安全原因，我了解网站将加载源脚本的白名单列入白名单，但是我不明白为什么在开发者控制台中完成例外处理的原因. CSP主要用于防止XSS攻击等，但是控制台中的某人故意使用代码和测试功能.
问题::控制台中是否有某些功能可以允许从备用站点加载脚本?我一直在摆弄源脚本摘要，但找不到任何选择.还是可能有其他不相关的解决方法?
在这里需要进行一些解释.
动态添加带有src的脚本标签时，浏览器将触发对JavaScript文件的请求.但是，此操作与页面上最初的常规标签不同，它是异步，不会被阻塞.这意味着当仍在提取文件时，下一行代码(在您的情况下为myfunc调用)将立即执行.因此，如果您希望将代码执行推迟到获取，解析和执行该脚本之后，则需要注册一个回调.我们可以通过侦听脚本元素的load事件来做到这一点.有两种方法:
scr.addEventListener('load', function() { myfunc(); });
并将功能分配给脚本元素onload属性.唯一真正的区别是addEventListener方法允许您附加多个侦听器，而scr.onload只能具有一个值(就像其他任何对象属性一样).
When entering javascript the in the browsers console window:
1)
The following code works:
alert('hi');
2)
The following doesn't:
(function() {
var scr = document.createElement('script');
scr.src = 'http://www.myrandomwebsite.com/myjs.js';
document.head.appendChild(scr);
myfunc();
})()
where the myjs.js folder contains:
var myfunc = function(){alert('hi')};
Explaining 2) the snippet of code entered in this case does cause the following code to appear at the end of the header tag in the source code:
<script src="http://www.myrandomwebsite.com/myjs.js"></script>
but the function myfunc isn't being recognized, because I get the following error message:
VM132:5 Uncaught ReferenceError: myfunc is not defined
Which leads me to believe that as a security measure, browsers don't run javascript code that is edited after the page has loaded, or something along those lines.
QUESTION: Is there a workaround of some sorts here? Whether it be a function that works like require('...'); in most programming languages. but It can't be by installing any special extension, just something that works on the fly.
I move around a lot, and work on different computers, and would love to be able to use some of the code I have without needing to always carry a USB with me.
________________________ UPDATE ________________________
The solution @Jared Smith proposed worked perfectly. Now there is one instance where it doesn't work (and I understand why). When a site has a Content-Security-Policy that doesn't allow scripts to be loaded from other URLs or any connections to be loaded:
for instance:
Content-Security-Policy: script-src 'self' https://apis.google.com
Content-Security-Policy: connect-src 'self' https://apis.google.com
And this makes perfect sense. My situation is that I have my own code that I run, however I wanted to be able to have this code stored on another site, and use it when I travel or am on other computers, without the need of extracting them from a USB.
Now I understand sites whitelisting what sources scripts are loaded from for security reasons, but I don't understand why there isn't an exception when it is done by the developers console. CSP is used mostly to prevent XSS attacks and such, but someone who is in the console is purposely using code and testing features.
QUESTION: Is there some feature in the console that might allow for scripts to be loaded from an alternative site? I have been fiddling with the Source Script Snippets but haven't been able to find an option. Or might there be some other unrelated work around?
A bit of an explanation is in order here.
When you add a script tag with a src dynamically the browser will fire off a request for the JavaScript file. But this operation, unlike a regular tag initially on the page, is asynchronous, it doesn't block. What this means is that the next line of code (in your case a call to myfunc) gets executed immediately, while the file is still being fetched. So if you want to defer code execution until after that script has been fetched, parsed, and executed, you need to register a callback. We can do this by listening for the script element's load event. There are two ways:
scr.addEventListener('load', function() { myfunc(); });
and assigning the function to the script elements onload property. The only real difference is that the addEventListener way allows you to attach multiple listeners, where as scr.onload can only have one value (like any other object property).
这篇关于浏览器控制台中的Javascript要求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
