文本溢出截取和xss攻击

XSS，跨站脚本攻击

存储型 XSS 攻击

利用漏洞提交恶意 JavaScript 代码，比如在input, textarea等所有可能输入文本信息的区域，输入<script src="http://恶意网站"></script>等，提交后信息会存在服务器中，当用户再次打开网站请求到相应的数据，打开页面，恶意脚本就会将用户的 Cookie 信息等数据上传到黑客服务器。

反射型 XSS 攻击

用户将一段含有恶意代码的请求提交给 Web 服务器，Web 服务器接收到请求时，又将恶意代码反射给了浏览器端，这就是反射型 XSS 攻击。 在现实生活中，黑客经常会通过 QQ 群或者邮件等渠道诱导用户去点击这些恶意链接，所以对于一些链接我们一定要慎之又慎。

Web 服务器不会存储反射型 XSS 攻击的恶意脚本，这是和存储型 XSS 攻击不同的地方。

window.opener 安全问题

window.opener 表示打开当前窗体页面的的父窗体的是谁。例如，在 A 页面中，通过一个带有 target="_blank" 的 a 标签打开了一个新的页面 B，那么在 B 页面里，window.opener 的值为 A 页面的 window 对象。

一般来说，打开同源(域名相同)的页面，不会有什么问题。但对于跨域的外部链接来说，存在一个被钓鱼的风险。比如你正在浏览购物网站，从当前网页打开了某个外部链接，在打开的外部页面，可以通过 window.opener.location 改写来源站点的地址。利用这一点，将来源站点改写到钓鱼站点页面上，例如跳转到伪造的高仿购物页面，当再回到购物页面的时候，是很难发现购物网站的地址已经被修改了的，这个时候你的账号就存在被钓鱼的可能了。

预防策略：

1. 设置 rel 属性

<a href="https://xxxx" rel="noopener noreferrer"> 外链 <a>
复制代码

rel=noopener 规定禁止新页面传递源页面的地址，通过设置了此属性的链接打开的页面，其 window.opener 的值为 null。 2. 将外链替换为内部的跳转连接服务，跳转时先跳到内部地址，再由服务器 redirect 到外链。 3. 可以由 widow.open 打开外链。

文本溢出截断

单行文本溢出

overflow: hidden; // 超出隐藏
white-space: nowrap; // 只在一行显示，不能换行
text-overflow: ellipsis; //溢出时显示省略号

优点

• 无兼容问题
• 响应式截断
• 文本溢出才显示省略号 ，否则不显示
• 省略号位置显示刚好

缺点

• 只支持单行文本截断

多行文本溢出

-webkit-line-clamp: 2;  //用来限制在一个块元素显示的文本的行数，2表示最多显示2行,需要结合其他的webkit属性
dispaly: -webkit-box;  //将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; //设置或检索伸缩盒子的子元素的排列方式
text-overflow: ellipsis; 

优点

• 响应式截断
• 文本溢出才显示省略号

缺点

• 兼容性一般： -webkit-line-clamp 属性只有webkit内核的浏览器才支持