为什么要同源策略

一个重要原因就是保护cookie，cookie中存着用户的登陆凭证，就相当于用户的账号密码。

想象以下场景，你正吃着火锅唱着歌，突然收到一封邮件说你的银行账号存在安全隐患，点击www.shazilai.com修复。虽然银行的官方网站是www.anquan.com，但是想到你的全部家当24块3毛都在卡里，慌乱的你没有注意这么多点击链接输入帐号密码进行登陆。这个网站其实是

iframe src="www.anquan.com"

在你输入帐号密码的时候，如果没有同源策略，外部已经有脚本获取你的输入或者直接通过document.cookie窃取了你的信息并且发送给攻击者了。

那有了同源策略，是不是我们的网站就万无一失了呢。并不是，还有很多其他手段威胁到网站安全，比如xss，csrf，clickJacking，本篇文章就简单阐述一下他们的攻击手段和基础攻防(后续添加)。

xss

Cross Site Script，译为是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而被迫改名为 XSS。主要分为反射型和储存型。

反射型

反射型的特点是不持久，它的特点是xss的代码出现在访问的链接里，作为一部分输入提交到服务器，然后服务器响应后返回浏览器，然后浏览器执行xss的代码。

一般攻击者通过邮件或者其他途径发送链接，用户点击之后达到攻击目的。

储存型

存储型和反射型的差别仅在于他的攻击代码会存储到服务器。这种攻击的最典型例子就是博客论坛的留言功能，访问包含这条留言的页面时，就会触发攻击代码。

比如某个论坛的个人中心里的个人简介，我们就可以在里面尝试注入代码进行练习，先来测试可用的标签

scriptapimgbodybuttonvardiviframemetaobjectmarqueeisindex inputselectkeygenframesetembedsvgmathvideoaudiotextarea

发现只有a标签存活下来，再来测试属性

a href onmouseover onclick

xss存在的主要原因在于没有对于用户的提交内容和接口的返回内容没有进行严格的过滤。

而防止xss的主要手段也是对输入和url参数进行过滤，对输出进行编码，还有就是cookie设置http-only。像常用的vue就有

const decodingMap = {

': '\n',

' ': '\t',

来对输入进行进行过滤，还有百度中输入scriptalert(1)/script也会被转译成scriptalert(1)%2Fscript。

至于http-only，严格来说没有阻止攻击，只是阻止了攻击后的cookie劫持。

php接收到["1009","1007"]这个字符串怎么转成1009,1007或者数组

你要先把html实体（即 quot;）转换为字符（即双引号）再来解析json：

$id=stripslashes(html_entity_decode($id));

print_r(json_decode($id));

web前端开发需要学些什么

web前端开发学习的内容包括以下8个阶段

阶段1.前端核心基础

HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和BOM编程、jQuery框架

阶段2.HTML5 + CSS3 + 移动端核心

HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练

阶段3.移动端

移动端核心、移动端适配、移动端特效

阶段4.服务器端

服务器端开发、数据库操作、前后端交互核心、微信公众号开发

阶段5.JavaScript高级

JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、JavaScript函数式编程、JavaScript设计模式

阶段6.前端必备

性能优化、版本控制工具、模块化、项目构建工具

阶段7.高级框架

React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析

阶段8.小程序

原生小程序入门、原生小程序API使用、小程序框架Mpvue

如何添加 content-security-policy 头

加上下面META

meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:"

CSP简介：

1、CSP官网是这样介绍它的：“The new Content-Security-Policy HTTP response header helps you reduce XSS risks on modern browsers by declaring what dynamic resources are allowed to load via a HTTP Header.”

2、大意是说，通过在http的响应头中设定csp的规则，可以规定当前网页可以加载的资源的白名单，从而减少网页受到XSS攻击的风险。所以说csp是一个在现代浏览器加载资源白名单的安全机制，只有响应头中白名单里列出的资源才能够被加载、执行。

急急急 tp5.1输出原html标签？

使用vue中的v-html指令，否则会因防止xss攻击不渲染html标签

解决 *** 如下：

1、双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

pUsing mustaches: {{ rawHtml }}/ppUsing v-html directive: span v-html="rawHtml"/span/p

2、建议去查看vue的相关的文档，这些东西需要前端做，和tp没有关系的

web前端需要掌握的哪些知识

一个合格的web前端需要掌握哪些技术？

最基础的自然是JavaScript，HTML和css这三种语言。

首先了解下它们到底是什么。

HTML是用户看到的网页的骨架，比如你会发现当前页面分为左中右三个部分，其中还填充了不同的文字和图片；每个子部分还会继续细分，比如当前页面的中间部分下方有输入框等等。

CSS是网页展示的细节控制，比如你会发现有的文字是红底白色，有的子部分占了页面的二分之一宽，有的只占六分之一，有些部分需要用户进行某些操作（如点击，滑动）才会出现等等，这些就是有CSS来控制。

JavaScript是负责捕捉用户在浏览器上的操作，并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击，输入等操作的时候，会触动绑定了该动作的JavaScript脚本，然后JavaScript收集数据，调用后端的api接口，再将后端返回的数据交给HTML和CSS渲染出来。

一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的，你可以直接按F12，就能看到下图右侧的模块，左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错，不妨点击F12，进行学习。

前端框架

然而，实际应用中，已经很少有正规的项目组直接用上述三种语言进行web 前端开发了，而是使用很多封装了这三种语言的框架，比如

Vue.js

，angular，react native等等。它们是来自谷歌和Facebook的大神项目组，基于自己的经验，封装了原生前端语言，实现了更多更复杂更酷炫的功能。因此，可以说，学会使用这些框架，能达到事半功倍的效果。

比如用了vue，它是自底向上增量开发的设计，其核心只关心图层，而且还可以与其他库或已存项目融合，学习门槛极其友好；另一方面，vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统，可以说，vue是处在一个不断壮大，不断完善的欣欣向荣的状态。

*** 通信协议

由于前后端分离的趋势，前端还需要了解很多 *** 通信协议的知识，这里不局限于http协议，因为据我的经验，有时候我们还会用到websocket等协议。因此，前端需要简单了解不同协议的特点以及使用方式，但是好消息是不用像学习计算机 *** 课程一样对每种协议的原理都了解的特别透彻，只要学会如何用前端语言发送这种协议的请求就够了。

web前端开发需要学习什么知识？

之一阶段：

HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

JavaScript基础：

Js基础教程、js内置对象常用 *** 、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

*** 基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、 *** *** 幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

*** 高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery：基础使用

悬着器、DOM操作、特效和动画、 *** 链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：

HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果 *** 、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页 *** 。

Bootstrap:

响应式概念、媒体查询、响应式网站 *** 、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见 *** 效果 *** 、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：

HTTP服务和AJAX编程

WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础：

PHP基础语法、使用PHP处理简单的GET或者POST请求、

AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍 *** 、兼容性处理 *** 、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇：

*** ON和 *** ON解析、数据绑定和模板技术、 *** ONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：

面向对象进阶

面向对象终极篇：

从内存角度到理解 *** 面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征：

继承性、多态性、封装性、接口。

设计模式：

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板 *** 模式、 *** 模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：

封装一个属于自己的框架

框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：

模块化组件开发

面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：

AMD设计规范、CMD设计规范、Require *** ，Load *** 、 *** 的Sea *** 。

第七阶段：

主流的流行框架

Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

常用库：

React.js、Vue.js、Zepto.js。

第八阶段：

HTML5原生移动应用开发

Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

Ionic：

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。

ReactNative：

ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5+：

HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段：

Node.js全栈开发：

快速入门：

Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端。

Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

希望会给大家带来帮助！