🚧 WIP Integrate parcel and refactor to more pure Vue components #459
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| ZAP_HUD_FILES=https://zap | ||
| ZAP_HUD_URL=https://targetdomain.com | ||
| ZAP_HUD_API=https://zap/api | ||
| ZAP_HUD_WS=https://zap/websocket | ||
| ZAP_HUD_TOOLS=http://zap/to/some/tool | ||
| ZAP_SHARED_SECRET=sometestsecret | ||
| ZAP_LOCALE=en_GB | ||
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 |
|---|---|---|
|
|
@@ -33,3 +33,8 @@ | |
| # JS | ||
| node_modules/ | ||
| dist/ | ||
| .cache | ||
| .env | ||
|
|
||
| # Visual Studio Code | ||
| .vscode | ||
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,48 @@ | ||
| <template> | ||
| <div class="accordion"> | ||
| <input type="checkbox" :id="title" name="accordion-checkbox" hidden> | ||
| <label class="accordion-header" :for="title">{{ title }} {{ urlCount }}</label> | ||
| <div class="accordion-body"> | ||
| <ul class="menu menu-nav"> | ||
| <li class="menu-item" v-for="alert in alerts"> | ||
| <!-- TODO: This should be alert.url but build was failing? --> | ||
| <a @click="alertSelect(alert)">{{ url }}</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| // template: "#alert-accordion-template", | ||
| props: ["title", "alerts", "port", "key"], | ||
| // props: { | ||
| // title: String, | ||
| // alerts: Array, | ||
| // port: Number, | ||
| // key: String | ||
| // }, | ||
| methods: { | ||
| close: function() { | ||
| this.$emit("close"); | ||
| }, | ||
| urlCount: function() { | ||
| return this.alerts.length; | ||
| }, | ||
| alertSelect: function(alert) { | ||
| // set keepShowing so that we don't hide the display frame | ||
| //TODO: replace app (Vue context w/ props) | ||
| app.keepShowing = true; | ||
| app.isAlertListModalShown = false; | ||
| app.isAllAlertsModalShown = false; | ||
|
|
||
| this.port.postMessage({ action: "alertSelected", alertId: alert.id }); | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| </style> | ||
|
|
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,120 @@ | ||
| <template id="alert-details-modal-template"> | ||
| <NavModal :title="title" :show="show" @close="close" @back="back"> | ||
| <div slot="body"> | ||
| <table class="table table-striped table-hover"> | ||
| <tbody> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_url'"></td> | ||
| <td @click="messageSelected(details.messageId)"> | ||
| <a href="#">{{ details['url'] }}</a> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_description'"></td> | ||
| <td>{{ details['description'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_risk'"></td> | ||
| <td>{{ details['risk'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_confidence'"></td> | ||
| <td>{{ details['confidence'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_parameter'"></td> | ||
| <td>{{ details['parameter'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_attack'"></td> | ||
| <td>{{ details['attack'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_evidence'"></td> | ||
| <td>{{ details['evidence'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_cweid'"></td> | ||
| <td>{{ details['cweid'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_wascid'"></td> | ||
| <td>{{ details['wascid'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_other'"></td> | ||
| <td>{{ details['other'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_solution'"></td> | ||
| <td>{{ details['solution'] }}</td> | ||
| </tr> | ||
| <tr> | ||
| <td v-t="'message.alerts_field_reference'"></td> | ||
| <td v-if="details['reference']"> | ||
| <li v-for="link in details['reference'].split('\n')"> | ||
| <a :href="link" target="_top">{{ link }}</a> | ||
| </li> | ||
| </td> | ||
| <td v-else></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </NavModal> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { EventBus } from "../libs/event-bus.js"; | ||
| import NavModal from "./NavModal.vue"; | ||
|
|
||
| export default { | ||
| template: "#alert-details-modal-template", | ||
| props: ["show", "title"], | ||
| components: { | ||
| NavModal | ||
| }, | ||
| methods: { | ||
| close: function() { | ||
| this.$emit("close"); | ||
| }, | ||
| messageSelected: function(id) { | ||
| //TODO: replace tabId, frameId w/ props | ||
| navigator.serviceWorker.controller.postMessage({ | ||
| tabId: tabId, | ||
| frameId: frameId, | ||
| action: "showHttpMessageDetails", | ||
| tool: "history", | ||
| id: id | ||
| }); | ||
| }, | ||
| back: function() { | ||
| //TODO: replace app (Vue context w/ props) | ||
| app.keepShowing = true; | ||
| app.isAlertDetailsModalShown = false; | ||
| this.port.postMessage({ back: true }); | ||
| } | ||
| }, | ||
| data() { | ||
| return { | ||
| port: null, | ||
| details: {} | ||
| }; | ||
| }, | ||
| created() { | ||
| let self = this; | ||
|
|
||
|
There was a problem hiding this comment. I haven't tried building the code from your PR yet, but I wonder a little why the clone of 'this'. Shouldn't the fat arrow function of the EventBus pass the scope natively? And even if this is merely an assignment instead of a deep copy, it does cost some cycles. Considering that this is all being run simultaneously in one browser window I would look for all opportunities to shave performance hits. |
||
| EventBus.$on("showAlertDetailsModal", data => { | ||
| //TODO: replace app (Vue context w/ props) | ||
| app.isAlertDetailsModalShown = true; | ||
| app.alertDetailsModalTitle = data.title; | ||
|
|
||
| self.details = data.details; | ||
| self.port = data.port; | ||
| }); | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
|
There was a problem hiding this comment. Every block you aren't using costs time in the development IDE (especially scoped style blocks). I have to recommend removing EVERYTHING that is not needed. End users won't thank you for it, but devs certainly will. |
||
| </style> | ||
|
There was a problem hiding this comment. Can you add a new-line at eof? There was a problem hiding this comment. @jsoref Can you clarify the need or value add of adding a new-line? I'm just curious if that's compliance w/ a tool or some other purpose. There was a problem hiding this comment. git diff (and every other diff) get really pissy about this. Basically all tools that work on whole lines (newline terminated) make optimizations based on this. So, whenever it's violated, they have to do a lot of work to undo this assumption. And standard text editors (e.g. So, as a general rule, the best policy is to always include the newline. There was a problem hiding this comment. Gotcha, thanks for the clarification. Seems like something a linter should be responsible for enforcing ultimately. |
||
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,54 @@ | ||
| <!-- alert list modal component --> | ||
| <template> | ||
| <Modal :title="title" :show="show" @close="close"> | ||
| <div slot="body"> | ||
| <AlertAccordion | ||
| v-for="(value, key) in alerts" | ||
| :key="key" | ||
| :title="key" | ||
| :alerts="value" | ||
| :port="port" | ||
| @close="close" | ||
| @open="open" | ||
| ></AlertAccordion> | ||
| </div> | ||
| </Modal> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { EventBus } from "../libs/event-bus.js"; | ||
| import Modal from "./Modal.vue"; | ||
| import AlertAccordion from "./AlertAccordion.vue"; | ||
|
|
||
| export default { | ||
| // template: "#alert-list-modal-template", | ||
| props: ["show", "title"], | ||
| components: { | ||
| Modal, | ||
| AlertAccordion | ||
| }, | ||
| methods: { | ||
| close: function() { | ||
| this.$emit("close"); | ||
| } | ||
| }, | ||
| data() { | ||
| return { | ||
| port: null, | ||
| alerts: {} | ||
| }; | ||
| }, | ||
| created() { | ||
| let self = this; | ||
|
|
||
| EventBus.$on("showAlertListModal", data => { | ||
| //TODO: replace app (Vue context w/ props) | ||
| app.isAlertListModalShown = true; | ||
| app.alertListModalTitle = data.title; | ||
|
|
||
| self.alerts = data.alerts; | ||
| self.port = data.port; | ||
| }); | ||
| } | ||
| }; | ||
| </script> |
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,100 @@ | ||
| <template> | ||
| <Modal :title="title" :show="show" @close="close"> | ||
| <div slot="body"> | ||
| <Tabs :activetab="activeTab"> | ||
| <Tab :name="$t('message.alerts_risk_high')" :selected="true"> | ||
| <AlertAccordion | ||
| v-for="(value, key) in alerts['High']" | ||
| :key="key" | ||
| :title="key" | ||
| :alerts="value" | ||
| :port="port" | ||
| @close="close" | ||
| ></AlertAccordion> | ||
| </Tab> | ||
|
|
||
| <Tab :name="$t('message.alerts_risk_medium')"> | ||
| <AlertAccordion | ||
| v-for="(value, key) in alerts['Medium']" | ||
| :key="key" | ||
| :title="key" | ||
| :alerts="value" | ||
| :port="port" | ||
| @close="close" | ||
| ></AlertAccordion> | ||
| </Tab> | ||
|
|
||
| <Tab :name="$t('message.alerts_risk_low')"> | ||
| <AlertAccordion | ||
| v-for="(value, key) in alerts['Low']" | ||
| :key="key" | ||
| :title="key" | ||
| :alerts="value" | ||
| :port="port" | ||
| @close="close" | ||
| ></AlertAccordion> | ||
| </Tab> | ||
|
|
||
| <Tab :name="$t('message.alerts_risk_info')"> | ||
| <AlertAccordion | ||
| v-for="(value, key) in alerts['Informational']" | ||
| :key="key" | ||
| :title="key" | ||
| :alerts="value" | ||
| :port="port" | ||
| @close="close" | ||
| ></AlertAccordion> | ||
| </Tab> | ||
| </Tabs> | ||
| </div> | ||
| </Modal> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { EventBus } from "../libs/event-bus.js"; | ||
| import VueI18n from "vue-i18n"; | ||
| import Modal from "./Modal.vue"; | ||
| import Tabs from "./Tabs.vue"; | ||
| import Tab from "./Tab.vue"; | ||
| import AlertAccordion from "./AlertAccordion.vue"; | ||
|
|
||
| export default { | ||
| // template: "#all-alerts-modal-template", | ||
| props: ["show", "title"], | ||
| components: { | ||
| AlertAccordion, | ||
| Tabs, | ||
| Tab | ||
| }, | ||
| methods: { | ||
| close: function() { | ||
| this.$emit("close"); | ||
| } | ||
| }, | ||
| data() { | ||
| return { | ||
| port: null, | ||
| alerts: {}, | ||
| activeTab: I18n.t("alerts_risk_high") | ||
| }; | ||
| }, | ||
| created: function() { | ||
| let self = this; | ||
|
|
||
| EventBus.$on("showAllAlertsModal", data => { | ||
| //TODO: replace app (Vue context w/ props) | ||
| app.isAllAlertsModalShown = true; | ||
| app.allAlertsModalTitle = data.title; | ||
|
|
||
| self.alerts = data.alerts; | ||
| self.port = data.port; | ||
| self.activeTab = data.risk; | ||
| }); | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| </style> | ||
|
|
||
|
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
walking through the commits rn. haha. so this is where you set the variables to be pulled in by postHTML?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yup! This file is just a template, for actual dev you would:
And then edit for your environment.
.envis in the.gitignoreas often times this has values you don't want committed to repo. I added some copy in theREADMEabout it and @melsoriano will document in the wiki too.