Enforcing noopener noreferrer with grunt-htmllint
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I recently was using create-react-app and noticed that the <a> tag in App.js was using the noopener noreferrer attributes. I also noticed that scattered throughout our code-base, are <a> tags which do not use the above attributes.
I wanted to, using grunt-htmllint, add a rule that would enforce the adding of these attributes but am having trouble with the value that I should add to what I think would be "tag-req-attr".
The documentation for the rule is listed here, but the usage for me is confusing. How can I set the specified <a> tag to include said rules?
I am looking for a way to enforce that the rel attribute contains both noopener and noreferrere.g.:
<a href="#" target="_blank" rel="noopener noreferrer">My Link</a>
Thanks
gruntjs static-analysis
add a comment |
I recently was using create-react-app and noticed that the <a> tag in App.js was using the noopener noreferrer attributes. I also noticed that scattered throughout our code-base, are <a> tags which do not use the above attributes.
I wanted to, using grunt-htmllint, add a rule that would enforce the adding of these attributes but am having trouble with the value that I should add to what I think would be "tag-req-attr".
The documentation for the rule is listed here, but the usage for me is confusing. How can I set the specified <a> tag to include said rules?
I am looking for a way to enforce that the rel attribute contains both noopener and noreferrere.g.:
<a href="#" target="_blank" rel="noopener noreferrer">My Link</a>
Thanks
gruntjs static-analysis
You probably want thelink-req-noopeneroption instead. So in theoptionsobject of yourgrunt-htmllinttask you add'link-req-noopener': true. However the description forlink-rel-no-openerstates: "If set, eachatag withtarget="_blank"must have arel="noopener"orrel="noreferrer"attribute." - Intentional emphasis on "or", so I don't think it works with both values present.
– RobC
Jan 4 at 19:23
add a comment |
I recently was using create-react-app and noticed that the <a> tag in App.js was using the noopener noreferrer attributes. I also noticed that scattered throughout our code-base, are <a> tags which do not use the above attributes.
I wanted to, using grunt-htmllint, add a rule that would enforce the adding of these attributes but am having trouble with the value that I should add to what I think would be "tag-req-attr".
The documentation for the rule is listed here, but the usage for me is confusing. How can I set the specified <a> tag to include said rules?
I am looking for a way to enforce that the rel attribute contains both noopener and noreferrere.g.:
<a href="#" target="_blank" rel="noopener noreferrer">My Link</a>
Thanks
gruntjs static-analysis
I recently was using create-react-app and noticed that the <a> tag in App.js was using the noopener noreferrer attributes. I also noticed that scattered throughout our code-base, are <a> tags which do not use the above attributes.
I wanted to, using grunt-htmllint, add a rule that would enforce the adding of these attributes but am having trouble with the value that I should add to what I think would be "tag-req-attr".
The documentation for the rule is listed here, but the usage for me is confusing. How can I set the specified <a> tag to include said rules?
I am looking for a way to enforce that the rel attribute contains both noopener and noreferrere.g.:
<a href="#" target="_blank" rel="noopener noreferrer">My Link</a>
Thanks
gruntjs static-analysis
gruntjs static-analysis
edited Jan 4 at 19:06
User 5842
asked Jan 4 at 16:00
User 5842User 5842
877925
877925
You probably want thelink-req-noopeneroption instead. So in theoptionsobject of yourgrunt-htmllinttask you add'link-req-noopener': true. However the description forlink-rel-no-openerstates: "If set, eachatag withtarget="_blank"must have arel="noopener"orrel="noreferrer"attribute." - Intentional emphasis on "or", so I don't think it works with both values present.
– RobC
Jan 4 at 19:23
add a comment |
You probably want thelink-req-noopeneroption instead. So in theoptionsobject of yourgrunt-htmllinttask you add'link-req-noopener': true. However the description forlink-rel-no-openerstates: "If set, eachatag withtarget="_blank"must have arel="noopener"orrel="noreferrer"attribute." - Intentional emphasis on "or", so I don't think it works with both values present.
– RobC
Jan 4 at 19:23
You probably want the
link-req-noopener option instead. So in the options object of your grunt-htmllint task you add 'link-req-noopener': true . However the description for link-rel-no-opener states: "If set, each a tag with target="_blank" must have a rel="noopener" or rel="noreferrer" attribute." - Intentional emphasis on "or", so I don't think it works with both values present.– RobC
Jan 4 at 19:23
You probably want the
link-req-noopener option instead. So in the options object of your grunt-htmllint task you add 'link-req-noopener': true . However the description for link-rel-no-opener states: "If set, each a tag with target="_blank" must have a rel="noopener" or rel="noreferrer" attribute." - Intentional emphasis on "or", so I don't think it works with both values present.– RobC
Jan 4 at 19:23
add a comment |
1 Answer
1
active
oldest
votes
According to, https://developers.google.com/web/tools/lighthouse/audits/noopener, it looks like noreferrer handles both cases: rel="noreferrer" attribute has the same effect, but also prevents the Referer header from being sent to the new page.
In that case, simply using the link-req-noopener rule should be sufficient.
Thelink-req-noopeneroption fails if bothnoopenerandnoreferrerexist as values for therelattribute as per the html fragment in your question.
– RobC
Jan 4 at 19:33
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54042333%2fenforcing-noopener-noreferrer-with-grunt-htmllint%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
According to, https://developers.google.com/web/tools/lighthouse/audits/noopener, it looks like noreferrer handles both cases: rel="noreferrer" attribute has the same effect, but also prevents the Referer header from being sent to the new page.
In that case, simply using the link-req-noopener rule should be sufficient.
Thelink-req-noopeneroption fails if bothnoopenerandnoreferrerexist as values for therelattribute as per the html fragment in your question.
– RobC
Jan 4 at 19:33
add a comment |
According to, https://developers.google.com/web/tools/lighthouse/audits/noopener, it looks like noreferrer handles both cases: rel="noreferrer" attribute has the same effect, but also prevents the Referer header from being sent to the new page.
In that case, simply using the link-req-noopener rule should be sufficient.
Thelink-req-noopeneroption fails if bothnoopenerandnoreferrerexist as values for therelattribute as per the html fragment in your question.
– RobC
Jan 4 at 19:33
add a comment |
According to, https://developers.google.com/web/tools/lighthouse/audits/noopener, it looks like noreferrer handles both cases: rel="noreferrer" attribute has the same effect, but also prevents the Referer header from being sent to the new page.
In that case, simply using the link-req-noopener rule should be sufficient.
According to, https://developers.google.com/web/tools/lighthouse/audits/noopener, it looks like noreferrer handles both cases: rel="noreferrer" attribute has the same effect, but also prevents the Referer header from being sent to the new page.
In that case, simply using the link-req-noopener rule should be sufficient.
answered Jan 4 at 19:26
User 5842User 5842
877925
877925
Thelink-req-noopeneroption fails if bothnoopenerandnoreferrerexist as values for therelattribute as per the html fragment in your question.
– RobC
Jan 4 at 19:33
add a comment |
Thelink-req-noopeneroption fails if bothnoopenerandnoreferrerexist as values for therelattribute as per the html fragment in your question.
– RobC
Jan 4 at 19:33
The
link-req-noopener option fails if both noopener and noreferrer exist as values for the rel attribute as per the html fragment in your question.– RobC
Jan 4 at 19:33
The
link-req-noopener option fails if both noopener and noreferrer exist as values for the rel attribute as per the html fragment in your question.– RobC
Jan 4 at 19:33
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54042333%2fenforcing-noopener-noreferrer-with-grunt-htmllint%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You probably want the
link-req-noopeneroption instead. So in theoptionsobject of yourgrunt-htmllinttask you add'link-req-noopener': true. However the description forlink-rel-no-openerstates: "If set, eachatag withtarget="_blank"must have arel="noopener"orrel="noreferrer"attribute." - Intentional emphasis on "or", so I don't think it works with both values present.– RobC
Jan 4 at 19:23