I have read through many answers on this topic but none seem to apply to what I am trying to do (or I am misunderstanding the problem entirely). Where a lot of my confusion lies is around whether it's the parent window or the iFrame that needs settings changed.
We have a small portal that allows users of our customers (asp mvc core 6 multi tenant app) to login and view their data. So far it works great, all but 1 of our customers do not iFrame the portal, we are trying to make it so they can frame our portal. They have their own domain.
Our authentication is the regular ASP Identity using cookies that is built in to the framework.
I've recreated a similar setup, I have a simple parent site that has this (the sub domain is their own sub domain to our site and if you go there you get the regular portal).
<div class="text-center">
<iframe src="https://sub.ourdomain.com" width="525" height="800" name="b3iframe"></iframe>
So far anything I do other than link to a new page fails within the iFrame. I can't POST a form, use AJAX, etc. Another problem is even if try to log them in (without POSTING a form, just hardcoded login for testing) the cookie does not set and the portal returns to the login page.
I have tried setting 'same-site=none' on both the parent and the framed site. (like what this describes).
I have tested simple things like making a fetch request and that fails (I get a 302)
All POST calls fail (even ones that don't require authentication, just test pages fail with a 400). When I get the 400 response code it is displayed within the frame.
I am aware and have used the ability to pass messages between the parent and iFrame but I don't think that can solve the cookie/POST problem.
I have tried using the 'target' attribute on the form to point to the iFrame but it appears that is for situations where the form is not inside the frame
The iFrame code can be just a simple login form:
<form method="post" id="loginForm">
<div class="form-group">
<label>Email Address</label>
<div>
<input asp-for="UserName" class="form-control" />
</div>
</div>
<div class="form-group">
<label>Password</label>
<div>
<input asp-for="Password" type="password" class="form-control" />
</div>
</div>
<div class="mt-5">
<button type="submit" style="width:100%" class="btn btn-primary tenant-custom-button">Log in</button>
</div></form>
What's frustrating is even in a mock parent website that I made and have full control of I can't seem to set it up so that the iFrame can use cookies or POST/GET (the test parent website is also ASP MVC CORE). The only thing I can do is have links to other pages without auth or POSTS.
Thanks for your time,
Brian
Related
I am trying to integrate ckeditor with vue js in my application. Everything is working fine but when i click on submit button, all the data is saved in database and all fields are empty.
but in this case , i am not able to edit the ck-editor if i refresh or change the dom and again come to same page then working fine.
I think it needs to re-binding of ckeditor but I am not sure how we can do it.
I followed this link -> https://vuejsexamples.com/ckeditor-using-for-vue-js-2/
to integrate the ck-editor and also using js file of ckeditor on index page.
I assume that the Form which you are using is submitted by the browser - native html behaviour. To avoid that, the input field with type submit should look like (both #submit.prevent so as #click.prevent):
<form #submit.prevent="">
<input type="text" />
<input type="submit" value="ok" #click.prevent="" />
</form>
I am trying to hide/show a div if a form-input has a value. This works just fine with a regular form but if I implement it with netlify-forms I get the following error:
Unhandled promise rejection TypeError: "setting getter-only property "message""
<form name="newsletter" method="POST" data-netlify="true">
<input #input="email = $event.target.value" type="email" name="email">
<div :class="{'hidden': email === ''}">
<div data-netlify-recaptcha="true" />
</div>
</form>
I also tried #focus and #blur instead of #input but the error is always the same.
Without the data-netlify="true" it works as expected so I suspect it to have something to do with Netlify injecting something into the form.
In Netlify's guide on Netlify Forms + Vue, they say that the way SPAs are rendered can prevent Netlify's bots from HTML-editing the form to link it with their services.
By default Vue renders client side but the Netlify post processing bots expect HTML on site deploy. Any netlify form attribute tags included in a Vue app would only be inserted into the DOM client-side, rather than in the HTML and thereby runs the risk of being totally overlooked by the build bots.
To handle this, you have two options. You can either pre-render your application or add the netlify form to your static HTML file in your public folder.
So either pre-render your HTML (which gives an added speed and SEO bonus), or give netlify a static form to attach itself to, which you can then hide and replace with your nice Vue form on the client.
#model Task3.Models.NewUser
<form action="" method="post">
<label>first Name </label>
<input type="text" placeholder="enter name" name="firstName"/>
<input type="text" placeholder="enter last name" name="lastName"/>
<button type="submit">Submit</button>
</form>
This code works even without asp-controller and asp-action. Why should I use those then?
The tag helpers asp-controller and asp-action can be used to automatically generate a target URL but you don’t have to use them. All they do is automatically generate the href attribute for links and action attributes for forms. If you want to fill in thos values manually, there is nothing that’s stopping you from doing that.
However, using the tag helpers has a clear benefit: The actual URL that you have to use depends on various things that affect your application’s routing. So if you use manual values, you have to take that into account. And if your routing changes (for whatever reason), you have to manually update the URLs throughout your templates.
By using the tag helpers, you are attaching the target location to something that is usually rather static: A controller action. So that way, you decouple the template from your routing configuration.
One more note for form actions specifically: If you do not specify a form action, the browser will automatically post to the current URL. So if you have a POST handler on the same route as the form, then you can totally omit the action and depend on that behavior.
I have div in html
<div id="test"></div>
If I do
$('#test').html(' <form method="GET" action="whatever"> <input type="text"/> </form>')
In IE 10 I will get
<div id="test">
<input type="text">
</div>
In Firefox or IE 8 I will get
<div id="test">
<form action="whatever" method="GET">
<input type="text">
</form>
Can you help me with IE10?
(jquery 1.7.2)
Around div test there is another form tag.
You stated in the end of your question that you are attempting to nest one form inside of another. Please have a look at the specification regarding the content model for form elements:
4.10.3 The form element
Content model:
Flow content, but with no form element descendants.
It is invalid to nest form elements. This may be why Internet Explorer 10 is trying to protect you from invalid markup that may not work properly in all browsers. The latest version of Google Chrome appears to also remove invalid child forms.
If you need to submit one form from inside another, use the form attribute on buttons instead. This will tell them which form they are to submit, and not necessarily the form they are currently in.
4.10.18.3 Association of controls and formsA form-associated element is, by default, associated with its nearest ancestor form element (as described below), but may have a form attribute specified to override this.
Note: This feature allows authors to work around the lack of support for nested form elements.
So you could have the following:
<form id="one">
<!-- This button submits #two -->
<input type="submit" form="two">
</form>
<form id="two">
<!-- This button submits #one -->
<input type="submit" form="one">
</form>
Try using .html() to append the the form with HTML functionality and after that use .append() to push every element in the form, so you have something like:
$('#test').html('<form method="GET" action="whatever"></form>');
$('form [action="whatever"]').append('<input type="text"/>'); // Note for selector will be better to use ID for the form
I need something to do a role based permission when rendering elements on a page exactly like implemented in JBoss Seam where you have the rendered tag while declaring the page elements. My doubt is if it is possible to do that using standard JAAS?
The container(weblogic) is connected to the LDAP server where the user is associated with a bunch of groups/roles and I would like to use some declarative approach to render menu elements based on the groups the user logged in belongs. That would be exactly like the Roles/rendered implemented in JBoss Seam 2. Is it possible to do that or something similar with standard J2EE? If not, Is there some Open Source API who would do the job?
Thanks in advance.
after some days of research what I did was configured weblogic realm to connect to the LDAP and than using a standard form login:
<form method="POST" action="j_security_check">
<p>Username: <input type="text" name="j_username"/></p>
<p>Password: <input type="password" name="j_password"/></p>
<input type="submit" value="Login"/>
</form>
After that I had my interface rendering using:
if(request.isUserInRole("ROLE_NAME"));
to check if the logged in user should be presented with a specific interface fragment. It worked.