Alpine: Add an no-alpine attribute

Created on 18 Apr 2020 · 4Comments · Source: alpinejs/alpine

I mentioned it in #237 -- but I think it deserves its own issue.

A typical Alpine use case may look like this:

<body>

<nav x-data="{ }">
</nav>

<div class="content" no-alpine>
... lots of potentially untrusted content.
</div>
</body>

I have jumped to the conclusion above, but the no-alpine would tell Alpine to skip walking this DOM node.

It should give

some level of security protection if you receive content from potentially untrusted sources
some speedup not having to walk megabytes of blog HTML

And it should be easy to implement, I think.

enhancement

Source

bep

👍2

Most helpful comment

This come up to my mind:

<div x-data="{foo:'bar'}" x-init="alert('this is belong to origin source')">
    <span>hey</span>
</div>
<div x-secure>
    <div x-data="{foo:'bar'}" x-init="alert('this is from untrusted sources')">
        <span>wow</span>
    </div>
    <button @click="show = ! show">Show</button>
</div>
<div x-data="{foo:'baz'}" x-init="alert('this is belong to origin source too')">
    <span>hoy</span>
</div>

so could be done by making a x-secure attribute that's prevent dom walking at the current element and move to the next element without entering in. I tried few ways but couldn't really figure out how to stop dom walking.

muzafferdede on 18 Apr 2020

👍3

All 4 comments

This come up to my mind:

<div x-data="{foo:'bar'}" x-init="alert('this is belong to origin source')">
    <span>hey</span>
</div>
<div x-secure>
    <div x-data="{foo:'bar'}" x-init="alert('this is from untrusted sources')">
        <span>wow</span>
    </div>
    <button @click="show = ! show">Show</button>
</div>
<div x-data="{foo:'baz'}" x-init="alert('this is belong to origin source too')">
    <span>hoy</span>
</div>

muzafferdede on 18 Apr 2020

👍3

Just created a pull request which i believe does the ~~security~~ skipping job. Open for any thoughts on it.

muzafferdede on 19 Apr 2020

Just created a pull request which i believe does the security job. Open for any thoughts on it.

Commented on the PR directly :)

ryangjchandler on 19 Apr 2020

👍1

Closing, here's my comment on the PR:

My thoughts:

The issue mentions x-ignore saving resources, and this is only true for x-ignore used within an Alpine component if it's used outside of one, that DOM will never get walked anyways
The closest convention in Vue is v-pre
I'd be open to an x-pre tag that skips walking a subsection of a components DOM in the future but I don't see an immediate need
I'm going to close this for now.

If there is a significant amount of people experiencing pain from the lack of a feature like this we should reconsider.

Thanks for all the thoughts and work on this.