前端-前端外包-北京前端外包

搜 索

Search:前端


前端开发工具:npm和pnpm有什么区别?pnpm安装

 npm和pnpm都是JavaScript的包管理工具,用于自动化安装、配置、更新和卸载npm包依赖。然而,它们在设计和功能上有一些关键的区别: 存储方式:npm为每个项目安装独立的包版本,即使多个项目使用相同的包版本,也会在每个项目的node_modules目录下存储一个副本。pnpm使用一个内容寻址的文件存储方式,如果多个项目使用相同的包版本,pnpm会存储单个副本,并在每个项目中创建硬链接。这节省了大量的磁盘空间并提高了安装速度。... npm和pnpm都是JavaScript的包管理工具,用于自动化安装、配置、更新和卸载npm包依赖。然而,它们在设计和功能上有一些关键的区别: 存储方式:npm为每个项目安装独立的包版本,即使多个项目使用相同的包版本,也会在每个项目的node_modules目录下存储一个副本。pnpm使用一个内容寻址的文件存储方式,如果多个项目使用相同的包版本,pnpm会存储单个副本,并在每个项目中创建硬链接。这节省了大量的磁盘空间并提高了安装速度。 性能:pnpm在性能方面通常优于npm,因为它使用硬链接和符号链接来避免重复包的冗余副本,从而加快了安装速度。安全性:pnpm在安装包时采用了严格的依赖解析策略。默认情况下,它不会扁平化依赖,这意味着子依赖不会被提升到项目的顶层node_modules目录,这减少了意外覆盖依赖的风险。依赖关系: npm的依赖扁平化可以导致许多顶层node_modules目录中的包,这在一些情况下可能会导致版本冲突或意外的行为。pnpm通过创建非扁平化的node_modules结构,避免了由于包之间的版本冲突所导致的问题。 命令行界面:npm和pnpm的命令行界面(CLI)非常相似,大多数命令都是一致的,如install, run, test等,但可能在某些高级功能和命令上有所不同。 兼容性:npm作为最早和最广泛使用的包管理器,几乎被所有的Node.js项目支持。pnpm虽然在许多项目中能够无缝工作,但在某些依赖于特定node_modules结构的工具或项目中可能会遇到兼容性问题。总体来说,pnpm在空间和性能方面提供了显著的优势,但在某些项目中可能需要额外的配置来保证与传统npm相同的行为。选择哪一个主要取决于个人或团队的需求和项目的特定要求。 pnpm安装全局安装npm install pnpm -g安装完成后,您可以使用以下命令来验证pnpm是否安装成功:pnpm --version如果您看到输出了pnpm的版本号,则表示安装成功。
标签:

前端开发:npm与yarn的区别

npm与yarn的区别yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具,yarn 是为了弥补 npm 的一些缺陷而出现的 同为包管理工具 npm和yarn的区别1、并行安装:yarn安装包会同时执行多个任务,npm 需等待上一个任务安装完成才能运行下一个任务...npm与yarn的区别yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具,yarn 是为了弥补 npm 的一些缺陷而出现的 同为包管理工具 npm和yarn的区别1、并行安装:yarn安装包会同时执行多个任务,npm 需等待上一个任务安装完成才能运行下一个任务 2、离线模式:如果你已经安装过一个包,用 yarn 再次安装会从缓存中获取,而 npm 会从网络下载 3、版本锁定:yarn 默认有一个 yarn.lock 文件锁定版本,保证环境统一,而 npm 默认从网络下载最新的最稳定的,版本锁定可以解决包之间版本不兼容问题,npm 也可以通过命令实现版本锁定 4、更简洁的输出:yarn 安装包时输出的信息较少,npm 输出信息冗余 npm存在的一些不足1、npm install 下载速度慢,即使是重新 install 时速度依旧慢 2、同一个项目,安装的无法保持一致性。原因是因为 package.json 文件中版本号的特点导致在安装的时候代表不同的含义。 3、使用 npm 安装多个 js 包时,包会在同一时间下载和安装。安装过程中,其中一个包抛出了一个异常,但 npm 会继续安装其他包,所以错误信息就会在一大堆提示信息中丢失掉,以至于直到执行前,都不会发现实际发生的错误。 yarn的优点1、安装速度快 (服务器速度快 , 并且是并行下载) 2、版本锁定,安装版本统一 3、缓存机制,如果之前已经安装过一个软件包,用Yarn再次安装时之间从缓存中获取,就不用像npm那样再从网络下载了 4、输出简洁并且多注册来源处理。安装包时,直观地打印出必要的信息;不管包被不同的库间接关联引用多少次,只会从一个注册来源去装,防止出现混乱不一致。 npm 淘宝镜像安装|npm怎么换为淘宝镜像cnpm安装
标签:

前端开发XSS攻击防御,常见的xss攻击方法,xss攻击类型

   xss跨站脚本攻击(Cross Site Scripting),是一种经常出现在web应用中的计算机安全漏洞,指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的。比如获取用户的Cookie,导航到恶意网站,携带木马等。   大部分的xss漏洞都是由于没有处理好用户的输入,导致攻击脚本在浏览器中执行,这就是跨站脚本漏洞的根源。...   xss跨站脚本攻击(Cross Site Scripting),是一种经常出现在web应用中的计算机安全漏洞,指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的。比如获取用户的Cookie,导航到恶意网站,携带木马等。   大部分的xss漏洞都是由于没有处理好用户的输入,导致攻击脚本在浏览器中执行,这就是跨站脚本漏洞的根源。xss攻击类型   1.非持久型XSS攻击   非持久型XSS(Non-persistent)又叫做反射XSS(Reflect XSS),它是指那些浏览器每次都要在参数中提交恶意数据才能触发的跨站脚本漏洞。   非持久型XSS漏洞实际上大多数攻击数据是包含在URL中的,类似这样的:http://www.chinasgp.cn/vul.asp?hi=[code]。需要用户的浏览器访问到这个URL恶意代码才执行,攻击者一般会把URL发给用户让用户通过浏览器去访问。不过URL里面带有稀奇古怪的代码确实有点奇怪,为了掩人耳目,攻击者可以发一个看起来没问题的URL,再通过那个页面跳转到恶意的URL;甚至也可以让一个域名转向到恶意URL,把那个域名发给用户。   2.持久型XSS攻击   持久型XSS(Persistent)又叫做存储XSS(Stored XSS),与非持久型XSS相反,它是指通过提交恶意数据到存储器(比如数据库、文本文件等),Web应用程序输出的时候是从存储器中读出恶意数据输出到页面的一类跨站脚本漏洞。   持久型XSS攻击就简单一点,只要第一次把攻击代码提交到服务器就一劳永逸了。比如我在某个论坛发帖的时候,论坛没有对传入的HTML作处理,那么我就可以发一个帖子内容包含“<script>[code]</script>”的帖子。呵呵,然后就守株待兔地等着来看帖子的人执行恶意脚本了。持久型XSS漏洞是把恶意脚本存储到了数据库,访问页面的时候完全没有预兆,所以它的危害也比非持久型XSS略微高一点。 常见的xss攻击方法  1.绕过XSS-Filter,利用<>标签注入Html/JavaScript代码;   2.利用HTML标签的属性值进行xss攻击。例如:<img src=“javascript:alert(‘xss’)”/>;(当然并不是所有的Web浏览器都支持Javascript伪协议,所以此类XSS攻击具有一定的局限性)   3. 空格、回车和Tab。如果XSS Filter仅仅将敏感的输入字符列入黑名单,比如javascript,用户可以利用空格、回车和Tab键来绕过过滤,例如:<img src=“javas  cript:alert(/xss/);”/>;   4. 利用事件来执行跨站脚本。例如:<img src=“#” onerror= “alert(1)”/>,当src错误的视乎就会执行onerror事件;   5. 利用CSS跨站。例如:Body {backgrund-image: url(“javascript:alert(‘xss’)”)};   6. 扰乱过滤规则。例如:<IMG SRC=“javaSCript: alert(/xss/);”/>;   7.利用字符编码,透过这种技巧,不仅能让XSS代码绕过服务端的过滤,还能更好地隐藏Shellcode;(JS支持unicode、eacapes、十六进制、十进制等编码形式)   8.拆分跨站法,将xss攻击的代码拆分开来,适用于应用程序没有过滤 XSS关键字符(如<、>)却对输入字符长度有限制的情况下;   9.DOM型的XSS主要是由客户端的脚本通过DOM动态地输出数据到页面上,它不依赖于提交数据到服务器,而是从客户端获得DOM中的数据在本地执行。容易导致DOM型的XSS的输入源包括:Document.URL、Location(.pathname|.href|.search|.hash)、 Document.referrer、Window.name、Document.cookie、localStorage/globalStorage; XSS攻击防御  原则:不相信客户输入的数据  注意:  攻击代码不一定在<script></script>中   1.使用XSS Filter。   输入过滤,对用户提交的数据进行有效性验证,仅接受指定长度范围内并符合我们期望格式的的内容提交,阻止或者忽略除此外的其他任何数据。比如:电话号码必须是数字和中划线组成,而且要设定长度上限。过滤一些些常见的敏感字符,例如:< > ‘ “ & # \ javascript expression  "onclick="  "onfocus";过滤或移除特殊的Html标签, 例如: <script>, <iframe> ,  &lt; for <, &gt; for >, &quot for;过滤JavaScript 事件的标签,例如 "onclick=", "onfocus" 等等。   输出编码,当需要将一个字符串输出到Web网页时,同时又不确定这个字符串中是否包括XSS特殊字符(如< > &‘”等),为了确保输出内容的完整性和正确性,可以使用编码(HTMLEncode)进行处理。   2.DOM型的XSS攻击防御   把变量输出到页面时要做好相关的编码转义工作,如要输出到 <script>中,可以进行JS编码;要输出到HTML内容或属性,则进行HTML编码处理。根据不同的语境采用不同的编码处理方式。   3.HttpOnly Cookie   将重要的cookie标记为http only,   这样的话当浏览器向Web服务器发起请求的时就会带上cookie字段,但是在脚本中却不能访问这个cookie,这样就避免了XSS攻击利用JavaScript的document.cookie获取cookie:
标签:

jsVue前端项目部署IIS的实现js大全

背景:最近用vue写了个demo(不涉及调用后台数据),为了给销售团队更好的给客户讲述产品的一些特点及大体的感官认识。需要将自己做的项目安装到他们的笔记本上面去,作为一个销售人员来说,他不会知道例如v背景:最近用vue写了个demo(不涉及调用后台数据),为了给销售团队更好的给客户讲述产品的一些特点及大体的感官认识。需要将自己做的项目安装到他们的笔记本上面去,作为一个销售人员来说,他不会知道例如vue中的npm run dev/serve等命令,电脑中也没有相应的运行环境,这时候就需要用到windows本身自带的IIS服务,将本地开发的项目放到这个服务器上面去,这样就解决了这个场景的问题。具体的实施步骤如下(以win10为例)1、win+r打开cmd命令窗口,输入control打开控制面板,选择程序-->启用或关闭windows功能2、选中ISS服务,为了不产生一些问题,点击每个加号选中下面所有选项3、然后点击确定,开始安装所需要的东西,过程需要一点时间,请耐心等待,如果出现如下所示的问题需修改注册表,HKEY_LOCAL_MACHINE/SOFTWARE/Policies/Microsoft/Windows/WindowsUpdate/AU,其中UseWUServer默认值为1,改成0;重启计算机,重复步骤1-3,即可安装成功4、打开控制面板,调整为图标状态,打开管理工具5、找到刚添加ISS服务并进行相关配置6、右键网站-->添加网站,并进行相应的配置7、物理路径为vue项目打好包(npm run build及其他打包的版本)所存放的目录,主机名无需填写,之后点确定即可启动,为防止端口名冲突,可设置为例如8082等8、启动后点击浏览即可在浏览器中预览自己部署的项目了,至此本机ISS部署vue项目完成以上就是本文的全部内容,希望对大家的学习有所帮助。
标签: