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はビデオのバイリンガル字幕だけでなく、ウェブページの単語翻訳や全文翻訳などの機能も提供します。