Enhance Vue Router useRoute query support and documentation#22209
Open
adrienpessu wants to merge 12 commits into
Open
Enhance Vue Router useRoute query support and documentation#22209adrienpessu wants to merge 12 commits into
adrienpessu wants to merge 12 commits into
Conversation
…seroute-query Model Vue Router useRoute query as a remote flow source
…ntenance Move Vue Composition API flow models into Vue.qll
Contributor
There was a problem hiding this comment.
Pull request overview
Enhances Vue analysis for Composition API flow and Vue Router route-query sources.
Changes:
- Models flow through five Vue reactivity helpers.
- Recognizes
useRoute().queryas remote input. - Expands tests and release documentation.
Show a summary per file
| File | Description |
|---|---|
javascript/ql/lib/semmle/javascript/frameworks/Vue.qll |
Adds Composition API summaries and useRoute tracking. |
javascript/ql/test/library-tests/frameworks/Vue/tst.js |
Adds helper-flow test cases. |
javascript/ql/test/library-tests/frameworks/Vue/tests.ql |
Adds data-flow and taint queries. |
javascript/ql/test/library-tests/frameworks/Vue/tests.expected |
Records expected analysis results. |
javascript/ql/test/library-tests/frameworks/Vue/router.js |
Adds a useRoute().query fixture. |
javascript/ql/lib/change-notes/2026-07-16-vue-router-useRoute-query.md |
Documents the analysis improvements. |
change-notes/1.26/analysis-javascript.md |
Lists vue-router support. |
Review details
- Files reviewed: 7/7 changed files
- Comments generated: 2
- Review effort level: Medium
|
|
||
| sink(Vue.ref(source("ref")).value); | ||
| sink(Vue.shallowRef(source("shallowRef")).value); | ||
| sink(Vue.toRef(source("toRef")).value); |
| sink(Vue.shallowRef(source("shallowRef")).value); | ||
| sink(Vue.toRef(source("toRef")).value); | ||
| sink(Vue.reactive(source("reactive"))); | ||
| sink(Vue.computed(() => source("computed")).value); |
|
|
||
| sink(Vue.ref(source("ref")).value); | ||
| sink(Vue.shallowRef(source("shallowRef")).value); | ||
| sink(Vue.toRef(source("toRef")).value); |
| sink(Vue.shallowRef(source("shallowRef")).value); | ||
| sink(Vue.toRef(source("toRef")).value); | ||
| sink(Vue.reactive(source("reactive"))); | ||
| sink(Vue.computed(() => source("computed")).value); |
Make `toRef` value-preserving and model the `computed` object overload so `.value` flow is exercised for both `computed` API shapes. `computed` is moved into the `vue.model.yml` data extension because the object overload requires callback flow synthesis that a hand-written `SummarizedCallable` cannot provide. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 5c95b651-1e79-499e-9e11-e09065b14aa9
…-tests Add Vue toRef value-flow and computed object-overload tests
|
|
||
| sink(Vue.ref(source("ref")).value); | ||
| sink(Vue.shallowRef(source("shallowRef")).value); | ||
| sink(Vue.toRef(source("toRef")).value); |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Enhance Vue Router
useRoutequery support and Vue Composition API flow modelingWhat we now detect as sources
useRoute().query— the query object returned by Vue Router'suseRoute()Composition API is now recognized as a client-side remote flow source (threat model:remote). Previously only the Options-APIcurrentRoute/ navigation-guard routes (to.query,from.query) were modeled.The problem
Modern Vue apps built with the Composition API read untrusted URL data via
const route = useRoute(); route.query.x. CodeQL did not modeluseRoute(), so query parameters read this way were not tracked as sources, causing missed DOM-based XSS and other client-side taint findings.In addition, values passed through Vue's core reactivity helpers (
ref,shallowRef,toRef,reactive,computed) were not propagated, so taint was lost as soon as data flowed through these wrappers.The fix
In
javascript/ql/lib/semmle/javascript/frameworks/Vue.qll:useRoute()source — addedrouter.getMember("useRoute").getACall()to the Vue Router remote-source modeling.VueCompositionApiSummary(SummarizedCallable) modeling data/taint flow through:ref/shallowRef:Argument[0]→ReturnValue.Member[value](value-preserving)toRef:Argument[0]→ReturnValue.Member[value](taint)reactive:Argument[0]→ReturnValue(taint)computed:Argument[0].ReturnValue→ReturnValue.Member[value](value-preserving)Also documented under supported frameworks (
vue-router) plus aminorAnalysischange note.The tests
router.js— importsuseRouteand addsuseRoute().query;tests.expectednow lists it under bothremoteFlowSourceandthreatModelSource(remote).tst.js— addssink(Vue.ref(source(...)).value)cases for all five helpers.tests.ql— newTestConfigwithcompositionApiDataFlow/compositionApiTaintFlowquery predicates (source→sink), verifying value-flow forref/shallowRef/computedand taint-flow additionally fortoRef/reactive.