-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #323 from pulibrary/menu-bar-unsafe-name-option
[LuxMenuBar] Add new unsafe_name property to the menu item object
- Loading branch information
Showing
5 changed files
with
132 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <template> | ||
| <span v-if="item.unsafe_name" v-html="item.unsafe_name"></span | ||
| ><template v-else>{{ item.name }}</template> | ||
| </template> | ||
| <script setup> | ||
| defineProps({ | ||
| item: Object, | ||
| }) | ||
| </script> | ||
| <docs> | ||
| ```jsx | ||
| <ul> | ||
| <li><lux-menu-bar-label :item=" | ||
| {name: 'Logout', href: '/logout'} | ||
| "/></li> | ||
| <li><lux-menu-bar-label :item=" | ||
| {unsafe_name: 'Bookmarks <strong>(1 / 3)</strong>', href: '/logout'} | ||
| "/></li> | ||
| ``` | ||
| Security considerations: | ||
| <ul> | ||
| <li>You can add any arbitrary HTML to the <code>unsafe_name</code> property, | ||
| and it will be rendered for the user. If you don't need to add arbitrary | ||
| HTML, use the <code>name</code> property instead. Don't bind the | ||
| <code>unsafe_name</code> property to any user-provided value, since it does | ||
| not have Cross-Site Scripting protections (<code>name</code> does have these | ||
| protections). | ||
| </li> | ||
| </ul> | ||
| </docs> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { mount } from "@vue/test-utils" | ||
| import _LuxMenuBarLabel from "@/components/_LuxMenuBarLabel.vue" | ||
|
|
||
| describe("_LuxMenuBarLabel", () => { | ||
| let wrapper | ||
| describe("when item prop has a name", () => { | ||
| beforeEach(() => { | ||
| wrapper = mount(_LuxMenuBarLabel, { | ||
| props: { | ||
| item: { name: "Hello!" }, | ||
| }, | ||
| }) | ||
| }) | ||
| it("displays the name", () => { | ||
| expect(wrapper.text()).toEqual("Hello!") | ||
| }) | ||
| }) | ||
| describe("when item prop name contains HTML", () => { | ||
| beforeEach(() => { | ||
| wrapper = mount(_LuxMenuBarLabel, { | ||
| props: { | ||
| item: { name: '<script>alert("Bad!")</script>' }, | ||
| }, | ||
| }) | ||
| }) | ||
| it("escapes the HTML, so that it displays as text rather than being potentially unsafe", () => { | ||
| expect(wrapper.text()).toEqual('<script>alert("Bad!")</script>') | ||
| expect(wrapper.find("script").exists()).toBe(false) | ||
| }) | ||
| }) | ||
| describe("when item prop has an unsafe_name", () => { | ||
| beforeEach(() => { | ||
| wrapper = mount(_LuxMenuBarLabel, { | ||
| props: { | ||
| item: { unsafe_name: "<span>Hello!</span>" }, | ||
| }, | ||
| }) | ||
| }) | ||
| it("does not escape the HTML", () => { | ||
| expect(wrapper.text()).toEqual("Hello!") | ||
| expect(wrapper.find("span").exists()).toBe(true) | ||
| }) | ||
| }) | ||
| describe("when item prop has both a name and an unsafe_name", () => { | ||
| beforeEach(() => { | ||
| wrapper = mount(_LuxMenuBarLabel, { | ||
| props: { | ||
| item: { | ||
| name: "Goodbye", | ||
| unsafe_name: "<span>Hello!</span>", | ||
| }, | ||
| }, | ||
| }) | ||
| }) | ||
| it("uses the unsafe name", () => { | ||
| expect(wrapper.text()).toEqual("Hello!") | ||
| expect(wrapper.find("span").exists()).toBe(true) | ||
| }) | ||
| }) | ||
| }) |