Skip to content

Commit f63cb59

Browse files
weaverryanweaverryan
committed
feature #1218 Live component force post requests (hepisec)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- Live component force post requests | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | Tickets | Fix #1208 | License | MIT When your component model may contain sensitive data, you probably don't want your data being transferred via GET requests, because then the data might leak to browser history, server logs etc. With this PR you can add `forcePost: true` to `#[AsLiveComponent]` and your component will always use POST requests to talk to the backend. ```php #[AsLiveComponent(forcePost: true)] class MySensitiveComponent { // ... } ``` Commits ------- 4310601 Live component force post requests
2 parents a2418ef + 4310601 commit f63cb59

28 files changed

+332
-80
lines changed

‎src/LiveComponent/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
- Add support for URL binding in `LiveProp`
66
- Allow multiple `LiveListener` attributes on a single method.
7+
- Requests to LiveComponent are sent as POST by default
8+
- Add method prop to AsLiveComponent to still allow GET requests, usage: `#[AsLiveComponent(method: 'get')]`
79

810
## 2.13.2
911

‎src/LiveComponent/assets/dist/Backend/Backend.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export interface BackendAction {
2020
}
2121
export default class implements BackendInterface {
2222
private readonly requestBuilder;
23-
constructor(url: string, csrfToken?: string | null);
23+
constructor(url: string, method?: 'get' | 'post', csrfToken?: string | null);
2424
makeRequest(props: any, actions: BackendAction[], updated: {
2525
[key: string]: any;
2626
}, children: ChildrenFingerprints, updatedPropsFromParent: {

‎src/LiveComponent/assets/dist/Backend/RequestBuilder.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { BackendAction, ChildrenFingerprints } from './Backend';
22
export default class {
33
private url;
4+
private method;
45
private readonly csrfToken;
5-
constructor(url: string, csrfToken?: string | null);
6+
constructor(url: string, method?: 'get' | 'post', csrfToken?: string | null);
67
buildRequest(props: any, actions: BackendAction[], updated: {
78
[key: string]: any;
89
}, children: ChildrenFingerprints, updatedPropsFromParent: {

‎src/LiveComponent/assets/dist/live_controller.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
3232
type: StringConstructor;
3333
default: string;
3434
};
35+
requestMethod: {
36+
type: StringConstructor;
37+
default: string;
38+
};
3539
queryMapping: {
3640
type: ObjectConstructor;
3741
default: {};
@@ -48,6 +52,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
4852
readonly hasDebounceValue: boolean;
4953
readonly debounceValue: number;
5054
readonly fingerprintValue: string;
55+
readonly requestMethodValue: 'get' | 'post';
5156
readonly queryMappingValue: {
5257
[p: string]: {
5358
name: string;

‎src/LiveComponent/assets/dist/live_controller.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2169,8 +2169,9 @@ class BackendRequest {
21692169
}
21702170

21712171
class RequestBuilder {
2172-
constructor(url, csrfToken = null) {
2172+
constructor(url, method = 'post', csrfToken = null) {
21732173
this.url = url;
2174+
this.method = method;
21742175
this.csrfToken = csrfToken;
21752176
}
21762177
buildRequest(props, actions, updated, children, updatedPropsFromParent, files) {
@@ -2187,6 +2188,7 @@ class RequestBuilder {
21872188
const hasFingerprints = Object.keys(children).length > 0;
21882189
if (actions.length === 0 &&
21892190
totalFiles === 0 &&
2191+
this.method === 'get' &&
21902192
this.willDataFitInUrl(JSON.stringify(props), JSON.stringify(updated), params, JSON.stringify(children), JSON.stringify(updatedPropsFromParent))) {
21912193
params.set('props', JSON.stringify(props));
21922194
params.set('updated', JSON.stringify(updated));
@@ -2244,8 +2246,8 @@ class RequestBuilder {
22442246
}
22452247

22462248
class Backend {
2247-
constructor(url, csrfToken = null) {
2248-
this.requestBuilder = new RequestBuilder(url, csrfToken);
2249+
constructor(url, method = 'post', csrfToken = null) {
2250+
this.requestBuilder = new RequestBuilder(url, method, csrfToken);
22492251
}
22502252
makeRequest(props, actions, updated, children, updatedPropsFromParent, files) {
22512253
const { url, fetchOptions } = this.requestBuilder.buildRequest(props, actions, updated, children, updatedPropsFromParent, files);
@@ -2840,7 +2842,7 @@ class LiveControllerDefault extends Controller {
28402842
initialize() {
28412843
this.handleDisconnectedChildControllerEvent = this.handleDisconnectedChildControllerEvent.bind(this);
28422844
const id = this.element.dataset.liveId || null;
2843-
this.component = new Component(this.element, this.nameValue, this.propsValue, this.listenersValue, (currentComponent, onlyParents, onlyMatchName) => LiveControllerDefault.componentRegistry.findComponents(currentComponent, onlyParents, onlyMatchName), this.fingerprintValue, id, new Backend(this.urlValue, this.csrfValue), new StandardElementDriver());
2845+
this.component = new Component(this.element, this.nameValue, this.propsValue, this.listenersValue, (currentComponent, onlyParents, onlyMatchName) => LiveControllerDefault.componentRegistry.findComponents(currentComponent, onlyParents, onlyMatchName), this.fingerprintValue, id, new Backend(this.urlValue, this.requestMethodValue, this.csrfValue), new StandardElementDriver());
28442846
this.proxiedComponent = proxifyComponent(this.component);
28452847
this.element.__component = this.proxiedComponent;
28462848
if (this.hasDebounceValue) {
@@ -3073,6 +3075,7 @@ LiveControllerDefault.values = {
30733075
debounce: { type: Number, default: 150 },
30743076
id: String,
30753077
fingerprint: { type: String, default: '' },
3078+
requestMethod: { type: String, default: 'post' },
30763079
queryMapping: { type: Object, default: {} },
30773080
};
30783081
LiveControllerDefault.componentRegistry = new ComponentRegistry();

‎src/LiveComponent/assets/src/Backend/Backend.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export interface BackendAction {
2525
export default class implements BackendInterface {
2626
private readonly requestBuilder: RequestBuilder;
2727

28-
constructor(url: string, csrfToken: string | null = null) {
29-
this.requestBuilder = new RequestBuilder(url, csrfToken);
28+
constructor(url: string, method: 'get' | 'post' = 'post', csrfToken: string | null = null) {
29+
this.requestBuilder = new RequestBuilder(url, method, csrfToken);
3030
}
3131

3232
makeRequest(

‎src/LiveComponent/assets/src/Backend/RequestBuilder.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import { BackendAction, ChildrenFingerprints } from './Backend';
22

33
export default class {
44
private url: string;
5+
private method: 'get' | 'post';
56
private readonly csrfToken: string | null;
67

7-
constructor(url: string, csrfToken: string | null = null) {
8+
constructor(url: string, method: 'get' | 'post' = 'post', csrfToken: string | null = null) {
89
this.url = url;
10+
this.method = method;
911
this.csrfToken = csrfToken;
1012
}
1113

@@ -37,6 +39,7 @@ export default class {
3739
if (
3840
actions.length === 0 &&
3941
totalFiles === 0 &&
42+
this.method === 'get' &&
4043
this.willDataFitInUrl(JSON.stringify(props), JSON.stringify(updated), params, JSON.stringify(children), JSON.stringify(updatedPropsFromParent))
4144
) {
4245
params.set('props', JSON.stringify(props));

‎src/LiveComponent/assets/src/live_controller.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
4545
debounce: { type: Number, default: 150 },
4646
id: String,
4747
fingerprint: { type: String, default: '' },
48+
requestMethod: { type: String, default: 'post' },
4849
queryMapping: { type: Object, default: {} },
4950
};
5051

@@ -56,6 +57,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
5657
declare readonly hasDebounceValue: boolean;
5758
declare readonly debounceValue: number;
5859
declare readonly fingerprintValue: string;
60+
declare readonly requestMethodValue: 'get' | 'post';
5961
declare readonly queryMappingValue: { [p: string]: { name: string } };
6062

6163
/** The component, wrapped in the convenience Proxy */
@@ -87,7 +89,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
8789
LiveControllerDefault.componentRegistry.findComponents(currentComponent, onlyParents, onlyMatchName),
8890
this.fingerprintValue,
8991
id,
90-
new Backend(this.urlValue, this.csrfValue),
92+
new Backend(this.urlValue, this.requestMethodValue, this.csrfValue),
9193
new StandardElementDriver()
9294
);
9395
this.proxiedComponent = proxifyComponent(this.component);

‎src/LiveComponent/assets/test/Backend/RequestBuilder.test.ts‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import RequestBuilder from '../../src/Backend/RequestBuilder';
22

33
describe('buildRequest', () => {
44
it('sets basic data on GET request', () => {
5-
const builder = new RequestBuilder('/_components?existing_param=1', '_the_csrf_token');
5+
const builder = new RequestBuilder('/_components?existing_param=1', 'get', '_the_csrf_token');
66
const { url, fetchOptions } = builder.buildRequest(
77
{ firstName: 'Ryan' },
88
[],
@@ -21,7 +21,7 @@ describe('buildRequest', () => {
2121
});
2222

2323
it('sets basic data on POST request', () => {
24-
const builder = new RequestBuilder('/_components', '_the_csrf_token');
24+
const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
2525
const { url, fetchOptions } = builder.buildRequest(
2626
{ firstName: 'Ryan' },
2727
[{
@@ -52,7 +52,7 @@ describe('buildRequest', () => {
5252
});
5353

5454
it('sets basic data on POST request with batch actions', () => {
55-
const builder = new RequestBuilder('/_components', '_the_csrf_token');
55+
const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
5656
const { url, fetchOptions } = builder.buildRequest(
5757
{ firstName: 'Ryan' },
5858
[{
@@ -87,7 +87,7 @@ describe('buildRequest', () => {
8787

8888
// when data is too long it makes a post request
8989
it('makes a POST request when data is too long', () => {
90-
const builder = new RequestBuilder('/_components', '_the_csrf_token');
90+
const builder = new RequestBuilder('/_components', 'get', '_the_csrf_token');
9191
const { url, fetchOptions } = builder.buildRequest(
9292
{ firstName: 'Ryan'.repeat(1000) },
9393
[],
@@ -112,8 +112,38 @@ describe('buildRequest', () => {
112112
}));
113113
});
114114

115+
it('makes a POST request when method is post', () => {
116+
const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
117+
const { url, fetchOptions } = builder.buildRequest(
118+
{
119+
firstName: 'Ryan'
120+
},
121+
[],
122+
{ firstName: 'Kevin' },
123+
{},
124+
{},
125+
{}
126+
);
127+
128+
expect(url).toEqual('/_components');
129+
expect(fetchOptions.method).toEqual('POST');
130+
expect(fetchOptions.headers).toEqual({
131+
// no token
132+
Accept: 'application/vnd.live-component+html',
133+
'X-Requested-With': 'XMLHttpRequest',
134+
});
135+
const body = <FormData>fetchOptions.body;
136+
expect(body).toBeInstanceOf(FormData);
137+
expect(body.get('data')).toEqual(JSON.stringify({
138+
props: {
139+
firstName: 'Ryan'
140+
},
141+
updated: { firstName: 'Kevin' },
142+
}));
143+
});
144+
115145
it('sends propsFromParent when specified', () => {
116-
const builder = new RequestBuilder('/_components?existing_param=1', '_the_csrf_token');
146+
const builder = new RequestBuilder('/_components?existing_param=1', 'get', '_the_csrf_token');
117147
const { url } = builder.buildRequest(
118148
{ firstName: 'Ryan' },
119149
[],
@@ -167,7 +197,7 @@ describe('buildRequest', () => {
167197
};
168198

169199
it('Sends file with request', () => {
170-
const builder = new RequestBuilder('/_components', '_the_csrf_token');
200+
const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
171201

172202
const { url, fetchOptions } = builder.buildRequest(
173203
{ firstName: 'Ryan' },
@@ -192,7 +222,7 @@ describe('buildRequest', () => {
192222
});
193223

194224
it('Sends multiple files with request', () => {
195-
const builder = new RequestBuilder('/_components', '_the_csrf_token');
225+
const builder = new RequestBuilder('/_components', 'post', '_the_csrf_token');
196226

197227
const { url, fetchOptions } = builder.buildRequest(
198228
{ firstName: 'Ryan' },

‎src/LiveComponent/src/Attribute/AsLiveComponent.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,15 @@ public function __construct(
4242
string $attributesVar = 'attributes',
4343
public bool $csrf = true,
4444
public string $route = 'ux_live_component',
45+
public string $method = 'post',
4546
) {
4647
parent::__construct($name, $template, $exposePublicProps, $attributesVar);
48+
49+
$this->method = strtolower($this->method);
50+
51+
if (!\in_array($this->method, ['get', 'post'])) {
52+
throw new \UnexpectedValueException('$method must be either \'get\' or \'post\'');
53+
}
4754
}
4855

4956
/**
@@ -56,6 +63,7 @@ public function serviceConfig(): array
5663
'live' => true,
5764
'csrf' => $this->csrf,
5865
'route' => $this->route,
66+
'method' => $this->method,
5967
]);
6068
}
6169

0 commit comments

Comments
 (0)