Helmet - Express.js Security with HTTP Headers - 双语字幕
When building a web application or just any website, security is an important consideration you need to make.
If working in express, helmet might be for you.
Helmet is an express middleware that works by packaging together 14 other express middlewares.
Helmet provides HTTP headers that help increase security.
It will add and remove headers to comply with modern web security standards.
This is incredibly important because it makes it much more difficult to exploit known vulnerabilities.
Express.
This, for example, has vulnerabilities that make it much more susceptible to cross-site scripting attacks and click-jacking attacks.
Helmet is not the end-all-be-all or one-stop-shop for web cybersecurity.
However, it's an important layer to put in place.
If we look at the cybersecurity Swiss cheese model of protection, we can see that helmet will be just one layer in our protection model.
Standard express headers provide an exposed sensitive information about the framework you're using.
One of these headers is X-powered by, which is a non-standard header that provides specific information about the back-um technology you're using.
If we look, we can see that the X-powered by header, here in Firebase, Firefox shows X powered by Express.
This would allow a malicious attacker to target known vulnerabilities in Express and try to exploit your web page.
Let's go ahead and add a to an Express project and see exactly what it does.
Our project consists of which is our routes, helmet.egs, which is our HTML, and app.js, which is our main express project.
Here is the site that it all creates right now, and this is without helmet.
From here, let's go ahead and install helmet.
So in our console, we're to do npm install helmet.
super simple, like you're installing any other NPM package, we'll let that install.
Once we have that,
we're going to go to our main app.js,
which is our project, and we're going to do var helmet equals requires helmet, just like, again, any other package.
Down below, we're going to want to do app.use.
and then in parentheses, helmet.
Now let's take a look at what helmet added to our project.
So first, we're going to want to restart our web server.
So that's just npm run start.
Let that start.
And now let's go over type localhost 3000.
again, just like normal.
Let's inspect element, reload page, select and let's look at of what each one does.
So the HTTP content security policy response header allows the website administrators to control resources.
The agent is allowed to load for the given page.
The HTTP cross-origin and better policy or co-op COE.
CP, response configures embedding cross-origin resources into the document.
The cross-origin opener policy,
COOP, COOP, response header allows you to ensure a top-level document does not share a browsing context group with cross-origin documents.
The HTTP cross-origin resources...
convey the desire that the browser blocks no cores, cross-origin, or cross-site requests to the given resource.
The agent cluster is an HTTP response header that instructs the browser to prevent synchronous scripting access between same-site cross-origin pages.
The referred policy heads up.
controls how much referer information, so now with the referer header, should be included with requests.
The transport security response header,
also abbreviated to HSTS sometimes, informs browser that the site should only be accessed using HTTPS and a future attempts to access it using HTTPS.
should automatically be converted to HTTPS.
Now starting on our X headers, which are non-standard headers.
The X content type options response is a marker used by the server
to indicate that the MIME types advertise in the content should be followed and not changed.
This header allows you to avoid mini-MIME-type-snit-thing by saying that the MIME-types are deliberately configured.
The XDNS pre-fetch control HTTP response header controls DNS pre-fetching A feature by which browsers proactively perform domain name resolution,
both links that the user may choose to follow as well as URLs for items referenced by the document,
including images, CSS, JavaScript, and so forth.
The download options header has only one option, no open.
This is for Internet Explorer from version 8.
browser not to open any download directly in the browser, but instead provide only the save option to the user.
The xframe options header can be used to indicate whether or not a browser should be allowed to render a in a frame,
iframe, embed, or object.
Sites can use this to avoid click-jacking.
attacks by ensuring that their content is not embedded into other sites.
The Ex permitted cross-domain policies header is used to allow PDF and flash documents for cross-domain requests.
And the XSS protection or cross-site scripting protection header of Internet Explorer,
Chrome, and that stops pages from loading when they detect a cross-site scripting attack.
As you might have noticed our website doesn't look like it did before.
We've got a few of these errors and our picture isn't showing up.
So this is due to some of the configuration that we need to and the security policies it put into place.
So we can see our errors are content security policy related.
So let's go over and look at our documentation.
Scroll down to our content security policy options,
which is one of the headers, and we can see some of the options we have to configure this.
can see that we can send in our own data to the options.
We've got a script error and image error and we can see some examples of how to do that.
So we can take a look, get idea, and now let's go back over to our code and implement this.
So first we're going to want to put brackets in here.
Then we're going to do content, security, policy, and then we're going to do brackets again.
So this is getting us into our content security policy area.
We're to do directives and send in our own options and configuration.
So first script S or C,
because this is modifying our script policy, we're going to put in self, because we want to make sure the self configurations are there.
And we're going to add in CDN that JS deliver.
And this is because this is where our bootstrap scripts are coming from.
Next, we're going to do the same with image, so imageSRC to get our imageSRC config, and
we're going to send in the default configs and helmet.js.gov.io because that's where the image is coming from.
Thanks, everybody.
commas and let's see if it worked.
So first we got our restarter server because we made a modification and now let's see if it worked.
Refreshing the page and we still have a few errors.
So this is actually a cores error, at least with the image.
So this is because we need to actually go into our HTML and set our cross origin.
So we go to our image.
We're going to do cross origin and we have to set it to anonymous.
This a little tricky thing that's not quite in the documentation, so this is important to pick up on.
See, now we've got our image.
We've got one more issue, and that's because of a misspelling with jazz delivery it looks like.
So let's go back.
are spilling, restarted server, and no more errors.
So let's go ahead and add some more configuration.
So first off, let's say we want to take styles from anywhere.
The documentation recommends style-specific.
SRC and sending that to null which will erase all the defaults.
Some other options we can add in are modifying the refer policy.
So here we're going to type in refer policy and like content security policy before we can just change the option.
only has policy as an option,
and by default it's no refer,
we're going to keep it as no refer just for this, but you could change that to whatever you need.
Next, another common one that can be configured is the strict transport security or HSTS.
And that'll, again, force you to use HTTPS.
So here we can send max-hit a different value.
The of full is 180 days.
Here we're setting it about 80 days.
And then we can also say that this only applies.
to the main domain and isn't included in the sub-domains.
And lastly, we add in a frame guard configuration.
So what this does,
again, is it specifies whether or a browser should be allowed to render a page in the frame, iframe, embed, or HTML elements.
And we can deny here.
So let's go ahead and try to run this.
Okay, if we go over back to Google, let's load our page.
So again, localhost 3000.
You see that our CSS is a messed up.
Our not in the middle.
Our text isn't centered.
So let's go ahead and inspect the helmet and see what's going on.
If we come down to our console,
we can see we've got content security policy issues,
and we did modify our content security policy with that style as or see,
and we can see that it has an issue with inline resources.
So depending on your style policy,
it may not be best practice to do inline CSS, but I have it in a few places in my HTML.
So that's what's causing the issue.
Let's go try to fix it.
So let's go back to our code.
We're going to want to go back to our config area.
All right.
And now it's style.src or style-src that's causing the issue.
And the reason is no wipes away all the defaults.
And there's one key thing we want in here.
And that's going to be unsafe inline.
And this is saying that we can do
use inline and it's not going to check for the safety but when we want to
accomplish the same thing that no will do which is any website can give
us style we just have to add a asterisk in there as well so now if we run it
everything works so that's a pretty common trap to fall in with the
configuration is wiping away more than you wanted so it's better to do overrides than it is to completely wipe out different policies.
We see here in our header that we've got styled at our dash SRC self-unsafe inline and asterisk so we can pull styles from anywhere and
have styles inline.
I hope this video has helped you what helmet does,
how to install a helmet, and how to configure helmet, and how to avoid common issues that arise when you're using helmet.
Helmet is one of the best and most simple ways to provide security for your website.
Security is often overlooked, especially when you're looking for APIs or more cool stuff.
when you're developing code or when you've got deadlines.
The helmet in its default configuration is just two lines of code.
Don't neglect security.
解锁更多功能
安装 Trancy 扩展，可以解锁更多功能，包括AI字幕、AI单词释义、AI语法分析、AI口语等
兼容主流视频平台
Trancy 不仅提供对 YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera 等平台的双语字幕支持，还能实现对普通网页的 AI 划词/划句翻译、全文沉浸翻译等功能，真正的语言学习全能助手。
支持全平台浏览器
Trancy 支持全平台使用，包括iOS Safari浏览器扩展
多种观影模式
支持剧场、阅读、混合等多种观影模式，全方位双语体验
多种练习模式
支持句子精听、口语测评、选择填空、默写等多种练习方式
AI 视频总结
使用 OpenAI 对视频总结，快速视频概要，掌握关键内容
AI 字幕
只需3-5分钟，即可生成 YouTube AI 字幕，精准且快速
AI 单词释义
轻点字幕中的单词，即可查询释义，并有AI释义赋能
AI 语法分析
对句子进行语法分析，快速理解句子含义，掌握难点语法
更多网页功能
Trancy 支持视频双语字幕同时，还可提供网页的单词翻译和全文翻译功能