Helmet - Express.js Security with HTTP Headers - Phụ đề song ngữ YouTube

Helmet - Express.js Security with HTTP Headers - Phụ đề song ngữ

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.

Ngôn ngữ dịch

Chọn

Tóm tắt Xuất bản Luyện tập nói

Mở khóa nhiều tính năng hơn

Cài đặt tiện ích Trancy để mở khóa nhiều tính năng hơn, bao gồm phụ đề AI, định nghĩa từ AI, phân tích ngữ pháp AI, nói chuyện AI, v.v.

Tương thích với các nền tảng video chính

Trancy không chỉ cung cấp hỗ trợ phụ đề song ngữ cho các nền tảng như YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, mà còn cung cấp dịch từ/câu bằng AI, dịch toàn văn sâu sắc và các tính năng khác cho các trang web thông thường. Đây là một trợ lý học ngôn ngữ đa năng thực sự.

Trình duyệt trên tất cả các nền tảng

Trancy hỗ trợ tất cả các trình duyệt trên tất cả các nền tảng, bao gồm tiện ích trình duyệt iOS Safari.

Nhiều chế độ xem

Hỗ trợ chế độ xem rạp, đọc, kết hợp và các chế độ xem khác để có trải nghiệm song ngữ toàn diện.

Nhiều chế độ luyện tập

Hỗ trợ luyện viết câu, đánh giá nói, trắc nghiệm nhiều lựa chọn, viết theo mẫu và các chế độ luyện tập khác.

Tóm tắt video AI

Sử dụng OpenAI để tóm tắt video và nắm bắt nhanh nội dung chính.

Phụ đề AI

Tạo phụ đề AI chính xác và nhanh chóng trên YouTube chỉ trong 3-5 phút.

Định nghĩa từ AI

Chạm vào từ trong phụ đề để tra cứu định nghĩa, với định nghĩa dựa trên AI.

Phân tích ngữ pháp AI

Phân tích ngữ pháp câu để nhanh chóng hiểu ý nghĩa câu và nắm vững các điểm ngữ pháp khó.

Nhiều tính năng web khác

Ngoài phụ đề song ngữ cho video, Trancy còn cung cấp dịch từ và dịch toàn văn cho các trang web.