web前端

在HTML上添加integrity，验证js和css的hash，防止篡改

admin web前端 暂无评论 932 浏览

近期甲方做了什么安全检查防止html、js被串改，要求加上integrity属性这边记录下如何生成hash值

计算hash

在linux上面使用此命令计算你需要生成hash的文件

[root@hhlqrtest js]# cat ./util.js | openssl dgst -sha384 -binary | openssl enc -base64 -A                
rfhUX/daSXdrSIHpOOPTxq222dR4unGS9FO+MsBx/DHDzaWWQwiWyqHKERHtNMnG
[root@hhlqrtest js]# 

rfhUX/daSXdrSIHpOOPTxq222dR4unGS9FO+MsBx/DHDzaWWQwiWyqHKERHtNMnG

这一行就是我们需要的hash值

添加integrity属性

crossorigin="anonymous" integrity="sha384-[刚刚的hash值]"

例如：…

            
Read more

第三代移动端布局方案

admin web前端 暂无评论 2,016 浏览

第三代移动端布局方案

大家有没有发现淘宝的H5移动端没有使用任何rem和vw单位，而是和web端项目一样，使用的是px单位。虽然是px但它也很完美的将整个页面渲染了出来。那淘宝的FE是怎么实现的呢？

最近在研究关于布局的设计方案，通过学习理解阿里的fusion.design的设计思想并结合手机淘宝H5版的px布局问题。逐渐有了一些想法，这里进行综合整理，也算是抛砖引玉吧。…

        
Read more

前端模块化的十年征程

admin web前端 暂无评论 849 浏览

这是一篇关于前端模块化的文章，但这里并不讲新技术，而是谈一谈——历史

夫以铜为镜，可以正衣冠；以史为镜，可以知兴替 ——《旧唐书·魏徵传》

前言

也许在谈论具体的内容之前，我们需要谈论一下关键词的定义。 什么是"模块"？在不同的语境下模块有不同的含义。

但在本文中，我们从广义的角度出发，将它解释为两个方面

  • 外部的模块: 指代引入前端工程的某个外部的包(package),可能由多个JS文件组成，但会通过入口暴露给我们项目调用
  • 内部的模块: 指代我们自己的工程项目中编码的最小单元： 即单个的JS文件

模块化已经发展了有十余年了，不同的工具和轮子层出不穷，但总结起来，它们解决的问题主要有三个…

Read more

前端开发常用免费资源，显著提升工作效率

admin web前端 暂无评论 1,505 浏览

最近几个月我收集了大量可以显著提升开发效率的资源链接，在这篇文章中我会分享其中一些。这些资源对我很有帮助，希望对你也是如此。闲话少叙，下面是一些很棒的免费资源！

HTML

…
Read more

移动端rem 适配方案

admin web前端 暂无评论 735 浏览

知识点：

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。

个人理解rem布局可分为俩种情况无设计稿和有设计稿：

无设计稿

1、首先需要在<head>标签中加入

<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">

对于viewport的详细解释可以参考这篇文章：https://www.cnblogs.com/2050/p/3877280.html

2、在<script>标签中加入

window.onresize = function
…
Read more

彻底弄懂浏览器缓存策略

admin web前端 暂无评论 1,840 浏览

Web 缓存介绍

  • Web 缓存是指一个 Web 资源（如 html 页面，图片，js，数据等）存在于 Web 服务器和客户端（浏览器）之间的副本。
  • 缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的 URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。
…
            
Read more

单个域名下浏览器Cookie限制个数为多少

admin web前端 暂无评论 1,263 浏览

起因

去网上搜了下关于Cookie的介绍，看了好几篇都长得很一样，阉割一下内容不外乎说是"不同浏览器限制cookie数不同，大致在30-50这个范围，（前缀）浏览器允许Cookie多达4KB左右，包括名、值、等号"。

我还在上学那会儿，包括后面毕业后工作一段时间，我也没有特别去关注过这个话题，基本上如果面试官问到我了，也就把网上知道的这些讲了一下。

今年的遭遇给了我思考的时间特别多，最近我又重新去仔细读了下楼上那句话，我发现我读不懂了，第一个，我看的资料并不是特别权威的，也都是网上的博客帖子，对浏览器限制30-50个这个范围产生了一个质疑，是真的吗？第二个是允许多达4KB左右，就很迷糊，到底是一个域名下所有的Cookie加起来的值是4KB左右，还是说单独的Cookie的一个Name所表示的信息它可以是4KB左右，这让我很迷啊。

…
Read more

一行代码实现网页暗黑模式

admin web前端 暂无评论 1,140 浏览

随着 iOS 13 暗黑模式的发布，前端又要开始忙适配了。那么有没有一劳永逸的方法呢？当然是有的，往下看：

1
2
3
 
html {
    filter: invert(100%) hue-rotate(180deg);
}

就是这么简单，点击下面的按钮尝试一下吧


…

Read more

只要一行代码，实现十种 CSS 经典布局

admin web前端 暂无评论 1,385 浏览

页面布局是样式开发的第一步，也是 CSS 最重要的功能之一。

常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。

这几个布局都是自适应的，自动适配桌面设备和移动设备。代码实现很简单，核心代码只有一行，有很大的学习价值，内容也很实用。

…
        
Read more