We Keep Coding

How to set url in index.html in swagger-UI

I am using Swagger-UI for jax-rs jersey.
So there is this index.html. There you have to enter the url for the swagger.json .
So this is a big problem.
We are deploying our application to a lot different environments.
And the respective swagger.json will always be on the same environment.
We have Jenkins build jobs and we cannot edit index.html for every environment.
window.onload = function() {
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: "**https://petstore.swagger.io/v2/swagger.json**",
Property url I always have to set.
What should I do?
P.S.
In Springfox Swagger-UI there is no physical swagger.json
But in jax-rs I have this dist folder and there is always a physical json
as far as I understand. Where should I put this so all different
clients can access it.

You can use vanilla JS for that:
var currentUrl = window.location.origin;
var apiBasePath = currentUrl + '/v2';
window.ui = SwaggerUIBundle({
url: apiBasePath + "/swagger.json",
...
})

Is it possible to get full url (including origin) from route in VueJS?

In this example:
const resolved = this.$router.resolve({
name: 'about'
})
console.log(resolved.route.path)
Is it possible to get route with origin included? Like, if the url is site.com/about, the code would give /about, so I'll need to append origin myself: window.location.origin + resolved.route.path.

I've been using this (tested with vue-router v4, browser only):
const route = router.resolve({ /* your route here */ });
const absoluteURL = new URL(route.href, window.location.origin).href;
Edit: Used location.origin instead of location.href since resolve().href already includes base.

No, not from the router.
Even the router's base property is relative to the app root:
The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value "/app/".
$route.fullPath also begins at the app root. The docs describe it as:
The full resolved URL including query and hash.

How to handle links in Phonegap + JQM app?

I am building an app with Phonegap and jQuerymobile. The app roughly works like this:
1) The app downloads a ZIP file from a public server and then unzips them to a local folder. I got the local folder path from fileSystem.root.toNativeURL() (in OS, it's something like this: file://var/mobile/Container/Data/Application/xxxx/Documents/)
2) App redirects to HTML that was unzipped in local folder (ex: file://var/mobile/Container/Data/Application/xxxx/Documents/index.html)
I am now facing issues b/c inside the index.html file, all the links are absolute path (ex: Link). This breaks all the links since (I assume) they are all now pointing to file://content/index2.html instead of file://var/mobile/Container/Data/Application/xxxx/Documents/content/index2.html.
My question is, how should I handle the links? I am thinking i should just rewrite all the links to force prepend the local folder URL in front of it. Is there a better way?
And if rewriting links is the way to go, how can I do this with jQuerymobile? I did this in jQuery which seems to work http://jsfiddle.net/jg4ouqc5/ but this code doesn't work in my app (jQueryMobile)

When you are loading index.html, you are getting file://some_path/..../index.html as your base URL. Any links which will be encountered now own-wards can be resolved in relation to the base URL.
You would know your scenario better. There could be multiple ways in which this can be fixed.
Have a contract with the CMS/Code generator. Links should always be generated either Relative to the base URL or Absolute. The links you are getting in the page are wrong - Link it ideally should be Link or fully qualified like https://www.google.com.
If you want to change the URL then you can use native code to change it after unzipping the content. It will be really straight forward.
If you want to change the URL in browser then you will have to persist the base url and then take care of couple of things:
a. absolute urls - In your case you can just check the window.location.protocol, if it starts with 'http' and then skip it.
b. sub-directories
Here is a small I have written:
Note: I have not tried this code and you might have to change it according to your need.
$(document).ready(function(){
var base_file_name = window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1);
//In index.html (persist this value in native)
var baseUrl = window.location.href.replace(base_file_name, "");
$("a").each(function () {
this.href = baseUrl + this.pathname;
$(this).click(function (e) {
e.preventDefault();
alert(this.pathname);
window.location.href = this.href;
});
});
});

The example you linked should work, make sure you have the <base> set correctly and that you are using the correct string to replace.

Yeah, your going to have to normalize all URL's when your page loads. I can't test with phonegap right now, but your basePath will need to be one of the following:
The file path as you described in your answer (not likely)
window.location.origin (optionally including window.location.pathname)
CODE:
// mini dom ready - https://github.com/DesignByOnyx/mini-domready
(function(e,t,n){var r="attachEvent",i="addEventListener",s="DOMContentLoaded";if(!t[i])i=t[r]?(s="onreadystatechange")&&r:"";e[n]=function(r){/in/.test(t.readyState)?!i?setTimeout(function(){e[n](r)},9):t[i](s,r,false):r()}})
(window,document,"domReady");
domReady(function () {
var anchors = document.getElementsByTagName['a'],
basePath = /* get your base path here, without a trailing slash */;
Array.prototype.forEach.call(anchors, function( anchor ){
anchor.setAttribute('href', basePath + anchor.getAttribute('href'));
});
});

Remove the forward slash from the beginning of your links.
href="content/index2.html">

Url Helper ASP.NET MVC in Javascript

I'm writing a js script that read a file JSON that contains all navigation menù links of my web application.
the menu tree is something like this:
1 - DASHBOARD - dashboard
2 - SETTINGS
2.1 - GENERAL - settings/general
2.2 - LAYOUT - settings/layout
3 - DATABASE
3.1 - QUERY
3.1.2 - EDITOR - database/query/editor
3.1.3 - TEST - database/query/test
the menù is 3 levels nested link.
How can I write links in JSON file to avoid "not found" when e.g. in "DASHBOARD" and want to go to SETTINGS > GENERAL.
I don't want to use absolute path, my webapp will run in a virtual directory.

If you can, I wolud suggest modifying your JSON response to include the base path your app is hosted on.
string basePath = string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"));
For example: basePath + "database/query/editor" instead of database/query/editor.
If you cannot modify the JSON response, you can get the base path your application is hosted on in a JavaScript variable from your MVC.
In your _Layout.cshtml file -- or whatever file that gets loaded every time your application is loaded -- set your base path that your application is running under in a JS variable:
<script type="text/javascript">
window.applicationBaseUrl = #Html.Raw(HttpUtility.JavaScriptStringEncode(Url.Content("~/"), true));
</script>
Now when you receive the JSON containing the URLs, concatenate them with your base path:
var queryEditorUrl = window.applicationBaseUrl + <the path from your JSON>
This way your URLs are independent of the virtual directory it is hosted on.

You should use Url.Content("~/") (see documentation) to get the absolute URL of your application. For example if you run your application in a virtual directory called MyApp and you have a page in About/Me you can use:
string url = Url.Content("~/About/Me"); // this will return '/MyApp/About/Me'

Angular insecure url

I'm using this directive to use jCrop with Angular: http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz?p=preview
When I load in a value for src, I get this error:
Can't interpolate: {{profileImg}} Error: [$sce:insecurl]
Then it links me to a page that says this:
Blocked loading resource from url not allowed by $sceDelegate policy.
My html is this:
<img-cropped src={{profileImg}} selected='selected(cords)'/>
And this error happens when I change $scope.profileImg to the url of my image.
I'm linking to S3, where I get the value from profileImg. I trust this source, so how can I tell angular that this source is trusted enough to get this directive working?
If I hardcode the src to be my image, I don't get this problem.
EDIT:
I'm trying to trust the url with $sce.
My controller:
cmsApp.controller('PresentationCtrl',function($scope, $upload, all, $sce){
var socket = io.connect('https://xxxxxx.xxxxxxxxxxxxxx.xxx:3000');
$scope.profileImg="";
$scope.uploadProfilePic = function(){
socket.removeAllListeners();
console.log(file3);
var url = 'https://xxxxxxx.xxxxxxxxxx.xxx:3000/uploadProfile?tenant=xxxxx';
$scope.upload = $upload.upload({
url:url,
data:{myObj:'test1'},
file:file3
}).progress(function(evt){
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data,status,headers,config){
$sce.trustAsUrl(data);
$scope.profileImg = data;
});
};
});
And even with the trustAsUrl, it throws the same error.
It might be that I'm trying to connect from it from my local nginx server?
EDIT2:
I moved it to S3 hosting, and it worked. The image I'm trying to link to is also on S3.
I moved it to an Apache web server on an EC2 instance, and it didn't work.
I'm using all the answers, ng-src instead of src, $sce.trustAsUrl(url), and the $compileProvider

sometimes its good to read the docs about $sce
This is a alternative to whitelist all blob and data:image/* urls for just the <img> tag but there is other way that you can solve this like generate a url > pass it into one of the sce function and it will be whitelisted. like #NuclearGhost said
app.config(["$compileProvider" function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob:|data:image)/);
}]);

If you'd like to add the url as a trusted source you can use the trustAsUrl() method from ng.$sce service
Here's the angular documentation for the service.

I ended up just turning it off with $sceProvider.enabled(false).